<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>JavaScript入门 | 学途路漫漫</title><meta name="author" content="学途路漫漫"><meta name="copyright" content="学途路漫漫"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="一.JavaScript简介1.1. 什么是JavaScript 官方概念：跨平台的脚本语言 平台：运行环境，这里一般指操作系统 跨平台：在各种操作系统下，都可以运行    1.2. 什么是脚本语言 特点：不能独立运行，依赖于网页  2.1. JS的发展历史​    1995年，NetScape公司，布兰登艾奇发明了一种运行在浏览器网页里的脚本语言Livescript。 通过本地而不是服务器进行验">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript入门">
<meta property="og:url" content="http://example.com/2020/05/07/JavaScript%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="学途路漫漫">
<meta property="og:description" content="一.JavaScript简介1.1. 什么是JavaScript 官方概念：跨平台的脚本语言 平台：运行环境，这里一般指操作系统 跨平台：在各种操作系统下，都可以运行    1.2. 什么是脚本语言 特点：不能独立运行，依赖于网页  2.1. JS的发展历史​    1995年，NetScape公司，布兰登艾奇发明了一种运行在浏览器网页里的脚本语言Livescript。 通过本地而不是服务器进行验">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2023/04/03/pph4Wo4.jpg">
<meta property="article:published_time" content="2020-05-07T10:43:44.000Z">
<meta property="article:modified_time" content="2023-04-03T12:50:25.127Z">
<meta property="article:author" content="学途路漫漫">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="Js">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2023/04/03/pph4Wo4.jpg"><link rel="shortcut icon" href="/img/avatar.gif"><link rel="canonical" href="http://example.com/2020/05/07/JavaScript%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'JavaScript入门',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-04-03 20:50:25'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>const preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> { preloader.endLoading() })

if (false) {
  document.addEventListener('pjax:send', () => { preloader.initLoading() })
  document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.gif" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">7</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">8</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 博客</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s1.ax1x.com/2023/04/03/pph4Wo4.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="学途路漫漫"></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 博客</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">JavaScript入门</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-05-07T10:43:44.000Z" title="发表于 2020-05-07 18:43:44">2020-05-07</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-04-03T12:50:25.127Z" title="更新于 2023-04-03 20:50:25">2023-04-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/JavaScript/">JavaScript</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="JavaScript入门"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="一-JavaScript简介"><a href="#一-JavaScript简介" class="headerlink" title="一.JavaScript简介"></a>一.JavaScript简介</h1><h3 id="1-1-什么是JavaScript"><a href="#1-1-什么是JavaScript" class="headerlink" title="1.1. 什么是JavaScript"></a>1.1. 什么是JavaScript</h3><ul>
<li>官方概念：跨平台的脚本语言<ul>
<li>平台：运行环境，这里一般指操作系统</li>
<li>跨平台：在各种操作系统下，都可以运行</li>
</ul>
</li>
</ul>
<h3 id="1-2-什么是脚本语言"><a href="#1-2-什么是脚本语言" class="headerlink" title="1.2. 什么是脚本语言"></a>1.2. 什么是脚本语言</h3><ul>
<li>特点：不能独立运行，依赖于网页</li>
</ul>
<h3 id="2-1-JS的发展历史"><a href="#2-1-JS的发展历史" class="headerlink" title="2.1. JS的发展历史"></a>2.1. JS的发展历史</h3><p>​    1995年，NetScape公司，布兰登艾奇发明了一种运行在浏览器网页里的脚本语言Livescript。</p>
<p>通过本地而不是服务器进行验证，为了快速的验证表单信息，这在当时来说是一个前所未有的壮举。</p>
<h3 id="2-2-浏览器大战"><a href="#2-2-浏览器大战" class="headerlink" title="2.2 浏览器大战"></a>2.2 浏览器大战</h3><p>​    LiveScript打开了浏览器市场，各大互联网巨头，都嗅到了蛋糕的味道，都想着分一杯羹，首当其中就是微软IE浏览器。</p>
<p>​    IE当年为了跟NetScape争夺市场份额。不甘落后很快退出适用于IE浏览器的JScript脚本语言。</p>
<p>​    由于缺乏统一标准，各个浏览器厂商发明的脚本语言，在用法和规范上不一致，成为了网页开发人员的噩梦。</p>
<p>​    1997年，ECMA（欧洲计算机制造商协会）成立了TC39委员会，委员会的成员基本都来自各大浏览器厂商。</p>
<p>​    这里面最重要的成员，就是当时如日中天的SUN公司，大家坐下来讨论之后，经过了大概1个月的世界，就快速制定出了浏览器脚本语言第一个全球标准。官方名称为ECMA Script编号ECMA-262。</p>
<p>​    由于总所周知的原因，大家没有忍住，蹭了一把JAVA热度，最终将其命名为JavaScript</p>
<p>​	至此，JavaScript诞生</p>
<p>​	如果非要说Java和Javascript有什么关系的话，就是Javascript在语法及很多API设计，内存结构设计上，直接借鉴和抄袭了Java</p>
<p>​	从这件事情可以看出，Java能这么经久不衰，是因为它非常优秀的设计（Java世界第一~~~</p>
<h2 id="二-JavaScript-基础内容"><a href="#二-JavaScript-基础内容" class="headerlink" title="二.JavaScript-基础内容"></a>二.JavaScript-基础内容</h2><h3 id="1-编辑工具和运行环境"><a href="#1-编辑工具和运行环境" class="headerlink" title="1. 编辑工具和运行环境"></a>1. 编辑工具和运行环境</h3><ul>
<li>VSCode</li>
<li>IE&#x2F;firefox(火狐)&#x2F;chrome(谷歌)&#x2F;edge</li>
</ul>
<h3 id="2-JavaScript组成"><a href="#2-JavaScript组成" class="headerlink" title="2. JavaScript组成"></a>2. JavaScript组成</h3><ol>
<li>ECMAScript<ul>
<li>版本：1,2,3,4,5,5.1,6</li>
</ul>
</li>
<li>DOM<ul>
<li>文档对象模型（Document Object Model）</li>
</ul>
</li>
<li>BOM<ul>
<li>浏览器对象模型（Browser Object Model）</li>
</ul>
</li>
</ol>
<h3 id="3-script标签"><a href="#3-script标签" class="headerlink" title="3. script标签"></a>3. script标签</h3><ul>
<li>所有js代码在script标签中编写</li>
<li>属性<ul>
<li>type&#x3D;’text&#x2F;javascript’ 声明标签内容文本格式（可省略</li>
<li>src&#x3D;’demo.js’ 引入外部js文件（处于引入文件功能时，Script标签内的代码将不执行）</li>
</ul>
</li>
<li>注意：<ul>
<li>可以有多个script标签，多个script标签自上而下顺序执行</li>
</ul>
</li>
</ul>
<h3 id="3-1-script标签属性"><a href="#3-1-script标签属性" class="headerlink" title="3.1 script标签属性"></a>3.1 script标签属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html5/att_script_async.asp">async</a></td>
<td>async</td>
<td>规定异步执行脚本（仅适用于外部脚本）。</td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html5/att_script_defer.asp">defer</a></td>
<td>defer</td>
<td>规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。</td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html5/att_script_type.asp">type</a></td>
<td><em>MIME_type</em></td>
<td>规定脚本的 MIME 类型。</td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html5/att_script_charset.asp">charset</a></td>
<td><em>character_set</em></td>
<td>规定在脚本中使用的字符编码（仅适用于外部脚本）。</td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/html5/att_script_src.asp">src</a></td>
<td><em>URL</em></td>
<td>规定外部脚本的 URL。</td>
</tr>
</tbody></table>
<h3 id="4-向页面输出内容"><a href="#4-向页面输出内容" class="headerlink" title="4. 向页面输出内容"></a>4. 向页面输出内容</h3><ol>
<li>document.write(‘内容’);	向body中添加文本</li>
<li>alert(‘内容’);    弹出提示框</li>
<li>console.log(‘内容’)    向控制台输出</li>
</ol>
<h3 id="5-JavaScript-常量和变量"><a href="#5-JavaScript-常量和变量" class="headerlink" title="5. JavaScript-常量和变量"></a>5. JavaScript-常量和变量</h3><h4 id="5-1-常量：值不可以改变的叫做常量"><a href="#5-1-常量：值不可以改变的叫做常量" class="headerlink" title="5.1. 常量：值不可以改变的叫做常量"></a>5.1. 常量：值不可以改变的叫做常量</h4><ul>
<li>数据类型：<ul>
<li>基本数据类型：<ul>
<li>数字<ul>
<li>类型：number</li>
<li>例子：100 -20 3.14</li>
</ul>
</li>
<li>布尔值<ul>
<li>类型：boolean</li>
<li>例子：true false</li>
</ul>
</li>
<li>字符串：<ul>
<li>类型：所有带单引号或双引号的</li>
<li>例子：’hello’ “hello” ‘100’ “3.14”</li>
</ul>
</li>
</ul>
</li>
<li>特殊数据类型<ul>
<li>null 空</li>
<li>undefined 未定义</li>
<li>NaN（not a number 值不是数字）</li>
</ul>
</li>
<li>复合&#x2F;引用数据类型<ul>
<li>数组</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="5-2-变量：值可以被修改的叫做变量"><a href="#5-2-变量：值可以被修改的叫做变量" class="headerlink" title="5.2. 变量：值可以被修改的叫做变量"></a>5.2. 变量：值可以被修改的叫做变量</h4><ol>
<li>声明变量（必须声明以后才能使用）<ul>
<li>关键字（系统征用的有特殊功能的单词叫关键字）：var 声明变量。</li>
</ul>
</li>
<li>初始化：声明变量时，直接给这个变量赋值叫做初始化。</li>
<li>如果我们声明变量时，没有值赋给这个变量，默认值为undefined。</li>
</ol>
<p>注意：为了提高整个程序运行的效率，我们可以将声明变量时，没有值赋值给这个变量的时候，默认值设成null，提高程序运行效率</p>
<h3 id="6-变量命名-和-弱引用"><a href="#6-变量命名-和-弱引用" class="headerlink" title="6. 变量命名 和 弱引用"></a>6. 变量命名 和 弱引用</h3><h4 id="6-1-变量命名"><a href="#6-1-变量命名" class="headerlink" title="6.1. 变量命名"></a>6.1. 变量命名</h4><ul>
<li>标识符：所有用户自定义的名字叫做标识符。<ul>
<li>变量名也是标识符。</li>
</ul>
</li>
<li>硬命名规则：<ol>
<li>只能由数字、字母、下划线和美元符号($)组成</li>
<li>不能以数字开头</li>
<li>不能为保留字和关键字</li>
<li>大小写敏感</li>
</ol>
</li>
<li>软命名规则：<ol>
<li>见名思意（使用英文全称）</li>
<li>单词个数超过2个<ul>
<li>驼峰式命名：className</li>
<li>下划线命名：class_name</li>
</ul>
</li>
</ol>
</li>
</ul>
<h4 id="6-2-变量弱引用"><a href="#6-2-变量弱引用" class="headerlink" title="6.2. 变量弱引用"></a>6.2. 变量弱引用</h4><ul>
<li>在JS中变量为弱引用类型：赋值成什么数据类型就是什么类型</li>
<li>注意：不建议改变当前变量的数据类型，容易引起歧义</li>
<li>typeof关键字：<ul>
<li>格式： typeof 常量&#x2F;变量</li>
<li>功能：输出当前常量或变量的数据类型。</li>
</ul>
</li>
</ul>
<h3 id="7-运算符"><a href="#7-运算符" class="headerlink" title="7. 运算符"></a>7. 运算符</h3><ol>
<li>算术运算<ul>
<li><code>+ - * / %(取余)</code></li>
</ul>
</li>
<li>关系运算符<ul>
<li><code>&gt; &lt; &gt;= &lt;= == != === !==</code></li>
</ul>
</li>
<li>逻辑运算符<ul>
<li><code>&amp;&amp; || !</code></li>
</ul>
</li>
<li>一元运算符<ul>
<li><code>++ --</code></li>
</ul>
</li>
<li>赋值运算符<ul>
<li>基本赋值运算符 &#x3D;</li>
<li>复合赋值运算符 +&#x3D; -&#x3D; &#x2F;&#x3D; …</li>
</ul>
</li>
</ol>
<h4 id="7-1-关系运算符"><a href="#7-1-关系运算符" class="headerlink" title="7.1. 关系运算符"></a>7.1. 关系运算符</h4><ol>
<li>两个单个字符比较：直接比较ASCII值。</li>
<li>两个多个字符比较：逐位比较ASCII值，一旦得出大于或小于的结果停止后面的比较得出结果。</li>
<li>其中一个是数值：另一个转换为数值，再进行比较。</li>
<li>其中一个是NaN：&#x3D;&#x3D;返回false，！&#x3D;返回true；并且NaN和自身不等。</li>
<li>&#x3D;&#x3D;&#x3D;恒等，相比&#x3D;&#x3D;数据类型也加入判断条件</li>
</ol>
<p>特殊值：</p>
<table>
<thead>
<tr>
<th>关系式</th>
<th>值</th>
</tr>
</thead>
<tbody><tr>
<td>null&#x3D;&#x3D;undefined</td>
<td>true</td>
</tr>
<tr>
<td>‘NaN’&#x3D;&#x3D;NaN</td>
<td>false</td>
</tr>
<tr>
<td>5&#x3D;&#x3D;NaN</td>
<td>false</td>
</tr>
<tr>
<td>NaN&#x3D;&#x3D;NaN</td>
<td>false</td>
</tr>
<tr>
<td>false&#x3D;&#x3D;0</td>
<td>true</td>
</tr>
<tr>
<td>true&#x3D;&#x3D;1</td>
<td>true</td>
</tr>
<tr>
<td>true&#x3D;&#x3D;2</td>
<td>false</td>
</tr>
<tr>
<td>undefined&#x3D;&#x3D;0</td>
<td>false</td>
</tr>
<tr>
<td>null&#x3D;&#x3D;0</td>
<td>false</td>
</tr>
<tr>
<td>‘100’&#x3D;&#x3D;100</td>
<td>true</td>
</tr>
<tr>
<td>‘100’&#x3D;&#x3D;&#x3D;100</td>
<td>false</td>
</tr>
</tbody></table>
<h4 id="7-2-逻辑运算符"><a href="#7-2-逻辑运算符" class="headerlink" title="7.2. 逻辑运算符"></a>7.2. 逻辑运算符</h4><p>与运算短路操作：当表达式1为false的时候，表达式2就不执行，直接得出结果为false。</p>
<p>或运算短路操作：</p>
<h4 id="7-3-自动数据类型转换"><a href="#7-3-自动数据类型转换" class="headerlink" title="7.3. 自动数据类型转换"></a>7.3. 自动数据类型转换</h4><ul>
<li>不同数据类型之间无法进行计算，将数据转成同一数据类型，再进行计算。</li>
<li>任何类型的数据和字符串类型的数据相加时，其他数据类型会自动转换为字符串类型。此时相加表示“<strong>拼接</strong>“的意思<ul>
<li>如果字符串是一个纯数字字符组成的字符串，转成对应的数字</li>
<li>如果字符串中含有除数字以外的字符，转成NaN，NaN和任何数据运算结果都为NaN。</li>
<li>除字符串以外的数据，在进行运算时，先转成数字，再进行运算。<ul>
<li>true→1 ， false→0 ， null→0 ， <strong>undefined→NaN</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="7-4-强制数据类型转换："><a href="#7-4-强制数据类型转换：" class="headerlink" title="7.4. 强制数据类型转换："></a>7.4. 强制数据类型转换：</h4><ul>
<li><p>Boolean() 其他数据类型强制转成布尔值</p>
<ul>
<li>数字：非0即真</li>
<li>字符串：非空即真</li>
</ul>
</li>
<li><p>Number() 其他数据类型转数字</p>
<ul>
<li>只有纯数字字符字符串转成数字，其他为NaN</li>
</ul>
</li>
<li><p>parseInt()取整</p>
<ul>
<li><p>1.取整</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="string">&quot;25a&quot;</span>)<span class="comment">//25</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">&quot;2a5a&quot;</span>)<span class="comment">//2</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">&quot;a25a&quot;</span>)<span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">&quot;3.14)//3</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>2.将别的进制转成十进制 必须传入字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str1=<span class="string">&quot;110100&quot;</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="built_in">parseInt</span>(str1,<span class="number">2</span>))<span class="comment">//52</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>parseFloat() 取浮点数</p>
<ul>
<li><p>举例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseFloat</span>(<span class="string">&quot;3.14b&quot;</span>)<span class="comment">//3.14</span></span><br><span class="line"><span class="built_in">parseFloat</span>(<span class="string">&quot;3.1b4b&quot;</span>)<span class="comment">//3.1</span></span><br><span class="line"><span class="built_in">parseFloat</span>(<span class="string">&quot;a3.1b4b&quot;</span>)<span class="comment">//NaN</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h4 id="8-流程语句练习-输出当前年的第多少天"><a href="#8-流程语句练习-输出当前年的第多少天" class="headerlink" title="8. 流程语句练习,输出当前年的第多少天"></a>8. 流程语句练习,输出当前年的第多少天</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> year = <span class="number">2000</span>;</span><br><span class="line"><span class="keyword">var</span> month = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> date = <span class="number">15</span>;</span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">switch</span>(month)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">12</span>:</span><br><span class="line">        sum += <span class="number">30</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">11</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">        sum += <span class="number">30</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">        sum += <span class="number">30</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">        sum += <span class="number">30</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">        sum += <span class="number">28</span>;</span><br><span class="line">        <span class="keyword">if</span>(uear % <span class="number">4</span>==<span class="number">0</span> &amp;&amp; year %<span class="number">100</span> !=<span class="number">0</span> ||year % <span class="number">400</span>==<span class="number">0</span>)&#123;</span><br><span class="line">            sum += <span class="number">1</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        sum += <span class="number">31</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        sum += date;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;error&quot;</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;这是第&quot;</span>+sum+<span class="string">&quot;天&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> week = <span class="title class_">Math</span>.<span class="title function_">ceil</span>(sum/<span class="number">7</span>);</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;这是第&quot;</span>+week+<span class="string">&quot;周&quot;</span>);</span><br></pre></td></tr></table></figure>

<h2 id="三-JavaScript-函数"><a href="#三-JavaScript-函数" class="headerlink" title="三. JavaScript-函数"></a>三. JavaScript-函数</h2><h4 id="1-函数的概念及作用"><a href="#1-函数的概念及作用" class="headerlink" title="1. 函数的概念及作用"></a>1. 函数的概念及作用</h4><ul>
<li>概念：函数就是把完成特定功能的一段代码<strong>抽象出来</strong>，使之成为程序中的一个<strong>独立实体</strong>，起个名字（<strong>函数名</strong>）。可以在同一个程序或其他程序中多次重复使用（<strong>通过函数名调用</strong>）。</li>
<li>作用：<ul>
<li>使程序变得简短而清晰</li>
<li>有利于程序维护</li>
<li>可以提高程序开发效率</li>
<li>提高了代码重用性（复用性）</li>
</ul>
</li>
</ul>
<h4 id="2-函数的声明与调用"><a href="#2-函数的声明与调用" class="headerlink" title="2. 函数的声明与调用"></a>2. 函数的声明与调用</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//无参无返回值</span></span><br><span class="line"><span class="keyword">function</span> 函数名()&#123;</span><br><span class="line">    函数体;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">函数名();</span><br><span class="line"></span><br><span class="line"><span class="comment">//有参无返回值</span></span><br><span class="line"><span class="keyword">function</span> 函数名(形参<span class="number">1</span>,形参<span class="number">2.</span>..)&#123;</span><br><span class="line">	函数体;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">函数名(实参<span class="number">1</span>,实参<span class="number">2.</span>..)</span><br><span class="line"></span><br><span class="line"><span class="comment">//有参数有返回值</span></span><br><span class="line"><span class="keyword">function</span> 函数名(形参<span class="number">1</span>，形参<span class="number">2.</span>..)&#123;</span><br><span class="line">	函数体;</span><br><span class="line">    <span class="keyword">return</span> 表达式;</span><br><span class="line">    <span class="comment">//函数调用的结果为表达式的值</span></span><br><span class="line">    <span class="comment">//函数遇到return会中止</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>注意：见名思意，函数名必须体现其功能。</p>
<h4 id="3-封装函数"><a href="#3-封装函数" class="headerlink" title="3. 封装函数"></a>3. 封装函数</h4><ol>
<li>分析不确定值</li>
<li>将不确定值声明为形参</li>
<li>函数名与形参名都要见名思意</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//编写一个函数 计算两数加减乘除 使用传参</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">operation</span>(<span class="params">num1,operator,num2</span>)&#123;</span><br><span class="line">    <span class="keyword">switch</span>(operator)&#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;+&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> num1 + num2;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;-&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> num1 - num2;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;*&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> num1 * num2;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;/&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> num1 / num2;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&quot;error&quot;</span>);</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//输入n为偶数 1/2+1/4+...+1/n,奇数，1/1+1/3+...+1/n</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> res=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">if</span>(n % <span class="number">2</span>==<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">2</span> ; i &lt;= n; i += <span class="number">2</span>)&#123;</span><br><span class="line">            res += <span class="number">1</span>/i;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>;i &lt;= n; i += <span class="number">2</span>)&#123;</span><br><span class="line">            res += <span class="number">1</span>/i;    </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="4-arguments"><a href="#4-arguments" class="headerlink" title="4. arguments"></a>4. arguments</h4><ul>
<li>每一个函数内都有一个系统内置的arguments</li>
<li>作用：存储实际传入的参数</li>
<li>属性：<ul>
<li>arguments.length 输出当前存储参数个数</li>
<li>arguments[下标] 访问其中的数据</li>
</ul>
</li>
<li>注意：由于违反了见名思意原则，尽量使用形参，除非特殊情况。</li>
</ul>
<h4 id="5-函数作用域"><a href="#5-函数作用域" class="headerlink" title="5. 函数作用域"></a>5. 函数作用域</h4><p>任何程序在执行的时候都要占用内存空间。函数调用的时候也要占用内存空间。</p>
<p>垃圾回收机制：调用函数时，系统会分配对应的空间给这个函数使用（空间大小一般情况由这个函数里声明的变量和形参决定）。当函数使用完毕之后，这个内存空间要释放，还给系统。</p>
<p>注意：在函数内部声明的变量和形参是属于当前函数的内存空间里的。</p>
<p>内存管理机制：在函数中声明的变量和形参，会随着函数的调用被创建，随着函数的调用结束而被销毁。在函数中声明的变量和形参，有效范围是当前函数（当前函数的大括号），这个范围被称为局部作用域。</p>
<p>就近原则：离哪个作用域近，就使用哪个作用域内的同名变量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//举例</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b=<span class="number">20</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">a</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">100</span>;</span><br><span class="line">    a += <span class="number">5</span>;</span><br><span class="line">    <span class="title function_">alert</span>(a + <span class="string">&quot;,&quot;</span> + b);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">show</span>(a);<span class="comment">//15,100</span></span><br><span class="line"><span class="title function_">alert</span>(a + <span class="string">&quot;,&quot;</span>+ b)<span class="comment">//10,20</span></span><br></pre></td></tr></table></figure>



<h4 id="6-递归函数"><a href="#6-递归函数" class="headerlink" title="6. 递归函数"></a>6. 递归函数</h4><p>满足以下三个特点就是递归：</p>
<ol>
<li>函数自己调用自己</li>
<li>一般情况下有参数</li>
<li>一般情况下有return</li>
</ol>
<p>作用：递归可以解决循环能做的所有事情，有一些循环不容易解决的事情，递归也能轻松解决。</p>
<p>递归编写方法：</p>
<ol>
<li>首先找临界值，即无需计算，获得的值。</li>
<li>找这一次和上一次的关系。</li>
<li>假设当前函数已经可以试用，调用自身计算上一次</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//计算1~n的和</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> res=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i&lt;=n; i++)&#123;</span><br><span class="line">		res += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">alert</span>(<span class="title function_">sun</span>(<span class="number">100</span>));<span class="comment">//5050</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归写法</span></span><br><span class="line"><span class="comment">//sum(100)=sum(99)+100;</span></span><br><span class="line"><span class="comment">//sum(n)=sun(n-1)+n</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum2</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(n==<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">sum</span>(n-<span class="number">1</span>)+n;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">alert</span>(<span class="title function_">sum</span>(<span class="number">100</span>));<span class="comment">//5050</span></span><br></pre></td></tr></table></figure>

<p>注意：一般公司明文禁止使用递归。（一旦出现故障瞬间开出一堆内存空间）</p>
<h4 id="6-1-递归练习"><a href="#6-1-递归练习" class="headerlink" title="6.1. 递归练习"></a>6.1. 递归练习</h4><p><strong>练习1：</strong></p>
<p>斐波那契数列，兔子繁衍问题，设有一对新生兔子，从第四个月开始他们每个月月初都生一对兔子，新生的兔子从第四个月月初开始又每个月生一对兔子，按此规律，并假定兔子没有死亡，n(n&lt;&#x3D;20)个月月末共有多少对兔子?</p>
<table>
<thead>
<tr>
<th></th>
<th align="center">一月兔</th>
<th align="center">二月兔</th>
<th align="center">三月兔</th>
<th align="center">四月兔</th>
<th align="center">总数</th>
</tr>
</thead>
<tbody><tr>
<td>一月</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td>二月</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td>三月</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
</tr>
<tr>
<td>四月</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td>五月</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">3</td>
</tr>
<tr>
<td>六月</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">4</td>
</tr>
<tr>
<td>七月</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">6</td>
</tr>
<tr>
<td>八月</td>
<td align="center">3</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center">3</td>
<td align="center">9</td>
</tr>
<tr>
<td>九月</td>
<td align="center">4</td>
<td align="center">3</td>
<td align="center">2</td>
<td align="center">4</td>
<td align="center">13</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. 首先找临界值，即无需计算，获得的值。</span></span><br><span class="line"><span class="comment">//2. 找这一次和上一次的关系。</span></span><br><span class="line"><span class="comment">//3. 假设当前函数已经可以试用，调用自身计算上一次</span></span><br><span class="line"><span class="comment">//rabbit(4) = rabbit(3) + rabbit(1);</span></span><br><span class="line"><span class="comment">//rabbit(n) = rabbit(n-1)  + rabbit(n - 3)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">rabbit</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(n&lt;<span class="number">4</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">rabbit</span>(n-<span class="number">1</span>)  + <span class="title function_">rabbit</span>(n - <span class="number">3</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>练习2：</strong></p>
<p>有一堆桃子不知数目，猴子第一天吃掉一半，觉得不过瘾，又多吃了一只，第二天照此办法，吃掉剩下桃子的一半另加一只，天天如此，到第num(num&lt;&#x3D;10)天早上，猴子发现只剩一只桃子了，问这堆桃子原来有多少只？（思路：n为还剩n天吃完的桃子数）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">peach</span>(<span class="number">10</span>)/<span class="number">2</span> - <span class="number">1</span> = <span class="title function_">peach</span>(<span class="number">9</span>);</span><br><span class="line"><span class="title function_">peach</span>(<span class="number">10</span>) = (<span class="title function_">peach</span>(<span class="number">9</span>) + <span class="number">1</span>) * <span class="number">2</span>;</span><br><span class="line"><span class="title function_">peach</span>(n) = (<span class="title function_">peach</span>(n-<span class="number">1</span>) + <span class="number">1</span>) * <span class="number">2</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">peach</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(n == <span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span>(<span class="title function_">peach</span>(n-<span class="number">1</span>) + <span class="number">1</span>) * <span class="number">2</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>练习3：</strong></p>
<p>输入一个n，打印n个hello world的运行结果，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//print(n) =print(n - 1) + 一次输出</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">print</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(n == <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;hello world&lt;br/&gt;&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">print</span>(n - <span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="四-JavaScript-数组"><a href="#四-JavaScript-数组" class="headerlink" title="四. JavaScript-数组"></a>四. JavaScript-数组</h2><h3 id="1-认识数组"><a href="#1-认识数组" class="headerlink" title="1.认识数组"></a>1.认识数组</h3><h4 id="1-1-为什么要使用数组"><a href="#1-1-为什么要使用数组" class="headerlink" title="1.1. 为什么要使用数组"></a>1.1. 为什么要使用数组</h4><p>​	当我们需要表示一组数据，或者叫做一次性定义很多相似的数字或变量时，就需要使用数组，如：表示一个班级学生的成绩，一年十二个月的销售数据等等</p>
<h4 id="1-2-数组的概念"><a href="#1-2-数组的概念" class="headerlink" title="1.2. 数组的概念"></a>1.2. 数组的概念</h4><ul>
<li>概念：数组的字面意思就是一组数据，一组（一般情况下相同类型）的数据（不一定都是数字，可以是任意数据类型）。<strong>数组是一种数据类型。</strong></li>
<li>数组的作用：使用单独的变量名来存储一系列的值</li>
</ul>
<h3 id="2-声明数组"><a href="#2-声明数组" class="headerlink" title="2.声明数组"></a>2.声明数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.通过new创建数组</span></span><br><span class="line"><span class="comment">//		参数：传入任意的数据，存储到数组中</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">100</span>,<span class="literal">true</span>,<span class="string">&quot;hello&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.省略new运算符创建数组</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="title class_">Array</span>(<span class="number">100</span>,<span class="literal">true</span>,<span class="string">&quot;hello&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.数组常量进行赋值。(JS一般使用中括号[])</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">100</span>,<span class="literal">true</span>,<span class="string">&quot;hello&quot;</span>];</span><br></pre></td></tr></table></figure>

<p>注意：使用1、2方法时，传入参数只有一个，并且为数字的时候，直接声明这么长的一个数组（数字为数组的长度）。</p>
<h3 id="3-数组属性"><a href="#3-数组属性" class="headerlink" title="3.数组属性"></a>3.数组属性</h3><ul>
<li>数组.length 返回值为数组元素的个数（数组长度）。<ul>
<li>元素：数组存储的每一个数据，叫做数组的元素</li>
</ul>
</li>
<li>访问数组的元素：<ul>
<li>数组[下标]; 下标从0开始</li>
</ul>
</li>
</ul>
<h3 id="4-数组遍历"><a href="#4-数组遍历" class="headerlink" title="4.数组遍历"></a>4.数组遍历</h3><h4 id="4-1-随机数"><a href="#4-1-随机数" class="headerlink" title="4.1. 随机数"></a>4.1. 随机数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Math</span>.<span class="title function_">random</span>() <span class="comment">//随机生成[0,1)中的数</span></span><br><span class="line"><span class="title function_">paerseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>()*<span class="number">10</span>) <span class="comment">//随机生成0~9的整数</span></span><br></pre></td></tr></table></figure>

<h4 id="4-2-循环赋值"><a href="#4-2-循环赋值" class="headerlink" title="4.2. 循环赋值"></a>4.2. 循环赋值</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//给数组每个元素赋值随机数</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">10</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++)&#123;</span><br><span class="line">    arr[i] = <span class="title function_">paerseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>()*<span class="number">10</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="4-3-快速遍历-x2F-快速枚举"><a href="#4-3-快速遍历-x2F-快速枚举" class="headerlink" title="4.3. 快速遍历&#x2F;快速枚举"></a>4.3. 快速遍历&#x2F;快速枚举</h4><p>差别：不用判断数组长度，运行过程中数组长度改变会出错（一般不写奇奇怪怪的代码不会发生错误）。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="comment">//页面上分别将每一个数输出</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> arr)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(arr[i]+<span class="string">&quot;&lt;br/&gt;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-数组方法"><a href="#5-数组方法" class="headerlink" title="5.数组方法"></a>5.数组方法</h3><h4 id="5-1-栈结构"><a href="#5-1-栈结构" class="headerlink" title="5.1. 栈结构"></a>5.1. 栈结构</h4><ul>
<li>栈：木盆<ul>
<li>放的时候最先放的放最底下，拿的时候拿最后放下去的。</li>
<li>特点：先进的后出</li>
</ul>
</li>
<li>数组的两个方法形成栈结构：<ul>
<li>push 方法<ul>
<li>格式：数组.push(参数1,参数2…)；</li>
<li>功能：给数组的末尾添加元素。</li>
<li>返回值：添加完元素后数组的长度</li>
</ul>
</li>
<li>pop 方法<ul>
<li>格式：数组.pop();</li>
<li>参数：没有参数</li>
<li>返回值：取下的元素</li>
<li>功能：从数组末尾取下一个元素</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="5-1-队列结构"><a href="#5-1-队列结构" class="headerlink" title="5.1. 队列结构"></a>5.1. 队列结构</h4><ul>
<li>结构：从末尾进，从头部出。</li>
<li>特点：先进的先出</li>
<li>shift() 方法<ul>
<li>格式：数组.shift();</li>
<li>参数：没有参数</li>
<li>功能：从数组的头部取下一个元素</li>
<li>返回值：取下的元素</li>
</ul>
</li>
<li>unshift() 方法<ul>
<li>格式：数组.unshift(参数1,参数2…)</li>
<li>功能：从数组的头部插入元素</li>
<li>返回值：插完元素以后数组的长度</li>
</ul>
</li>
</ul>
<h4 id="5-2-concat-方法"><a href="#5-2-concat-方法" class="headerlink" title="5.2. concat()方法"></a>5.2. concat()方法</h4><ol>
<li>拷贝原数组，生成新数组。</li>
<li>合并数组<ul>
<li>格式：数组.concat(数组,数据,…)</li>
<li>返回值：合并成的新数组。</li>
<li>注意：就算传入是数组，数组中元素中的元素要单独拆出来再进行合并。</li>
</ul>
</li>
</ol>
<h4 id="5-2-slice-方法"><a href="#5-2-slice-方法" class="headerlink" title="5.2. slice()方法"></a>5.2. slice()方法</h4><ul>
<li>格式：数组.slice(start,end);   [start,end)</li>
<li>功能：可以基于当前数组获取指定区域元素[start,end)，提取出元素生成新数组。</li>
<li>返回值：生成的新数组，原数组不会发生任何的改变。</li>
</ul>
<h4 id="5-3-splice-方法"><a href="#5-3-splice-方法" class="headerlink" title="5.3. splice()方法"></a>5.3. splice()方法</h4><ul>
<li><p>格式：数组.splice(start,length,数据1,数据2…)</p>
<ul>
<li>参数：<ul>
<li>start 开始截取的位置</li>
<li>length 截取元素的长度</li>
<li>第三个参数开始：在start位置插入的元素</li>
</ul>
</li>
<li>返回值：截取下来的元素组成的数组</li>
</ul>
</li>
<li><p>增加</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">splice</span>(<span class="number">2</span>,<span class="number">0</span>,<span class="string">&quot;hello&quot;</span>,<span class="string">&quot;world&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//10,20,hello,world,30,40,50</span></span><br><span class="line"><span class="title function_">alert</span>(res);<span class="comment">//空数组</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>删除</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">splice</span>(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//10,40,50</span></span><br><span class="line"><span class="title function_">alert</span>(res);<span class="comment">//20,30</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>修改(先删后增)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line">arr.<span class="title function_">splice</span>(<span class="number">2</span>,<span class="number">1</span>,<span class="string">&quot;hello&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//10,20,hello,40,50</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="5-4-join-方法"><a href="#5-4-join-方法" class="headerlink" title="5.4. join()方法"></a>5.4. join()方法</h4><ul>
<li>格式：数组.join(字符串)</li>
<li>功能：将数组中的元素，用传入的拼接符，拼接成一个字符串。</li>
<li>返回值：拼接好的字符串</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>];</span><br><span class="line"><span class="keyword">var</span> str = arr.<span class="title function_">join</span>(<span class="string">&quot;==&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(str);<span class="number">10</span>==<span class="number">20</span>==<span class="number">30</span></span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span></span><br></pre></td></tr></table></figure>

<h4 id="5-5-resver-方法"><a href="#5-5-resver-方法" class="headerlink" title="5.5. resver()方法"></a>5.5. resver()方法</h4><ul>
<li>功能：逆序</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="literal">true</span>,<span class="string">&quot;hello&quot;</span>,<span class="number">100</span>];</span><br><span class="line">arr.<span class="title function_">reverse</span>();</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//100,hello,true</span></span><br></pre></td></tr></table></figure>

<h4 id="5-6-sort-方法"><a href="#5-6-sort-方法" class="headerlink" title="5.6. sort()方法"></a>5.6. sort()方法</h4><ul>
<li><p>格式：数组.sort()	默认从小到大排序，按字符串排序</p>
</li>
<li><p>参数：一个函数，代表要怎么进行排序（固定用法）</p>
</li>
<li><p>按数值排序方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">1</span>,<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">25</span>,<span class="number">5</span>];</span><br><span class="line"><span class="comment">//从小到大</span></span><br><span class="line">arr.<span class="title function_">sort</span>(<span class="keyword">function</span>(<span class="params">value1,value2</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> value1 - value2;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//从大到小</span></span><br><span class="line">arr.<span class="title function_">sort</span>(<span class="keyword">function</span>(<span class="params">value1,value2</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> value2 - value1;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="5-7-数组求平均数"><a href="#5-7-数组求平均数" class="headerlink" title="5.7. 数组求平均数"></a>5.7. 数组求平均数</h4><p>​	定义一个含有38个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=<span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">30</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">    arr[i]=i*i+<span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> avgArr=[];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">6</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">var</span> newArr.<span class="title function_">splice</span>(<span class="number">0</span>,<span class="number">5</span>);<span class="comment">//splice对原数组进行修改</span></span><br><span class="line">    <span class="comment">//var newArr = arr.slice(i*5,(i+1)*5);也行</span></span><br><span class="line">    <span class="keyword">var</span> sum=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;newArr.<span class="property">length</span>;j++)&#123;</span><br><span class="line">        sum+=newArr[j];</span><br><span class="line">    &#125;</span><br><span class="line">    avgArr.<span class="title function_">push</span>(sum/<span class="number">5</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">alert</span>(avgArr);</span><br></pre></td></tr></table></figure>

<h3 id="6-引用数据类型"><a href="#6-引用数据类型" class="headerlink" title="6. 引用数据类型"></a>6. 引用数据类型</h3><ul>
<li>运行程序：<ul>
<li>1、准备运行程序要用的空间(一旦分配好，内存大小没办法进行改变)</li>
<li>2、开始运行程序</li>
</ul>
</li>
<li>数组的变量存储的是数组的地址值。</li>
<li>concat()方法：拷贝原数组生成一个新数组</li>
</ul>
<h3 id="7-声明提升和省略var"><a href="#7-声明提升和省略var" class="headerlink" title="7. 声明提升和省略var"></a>7. 声明提升和省略var</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明提升</span></span><br><span class="line"><span class="title function_">alert</span>(num);</span><br><span class="line"><span class="keyword">var</span> num=<span class="number">10</span>;</span><br><span class="line"><span class="title function_">alert</span>(num);</span><br><span class="line"><span class="comment">//undefined 10</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">内存分配，一次分配</span></span><br><span class="line"><span class="comment">预编译：所有代码运行之前，计算机将代码从头到尾看一遍。</span></span><br><span class="line"><span class="comment">	将这个程序需要运行的空间一次性分配好。</span></span><br><span class="line"><span class="comment">	var num=10在第二行 声明var num在所有程序之前</span></span><br><span class="line"><span class="comment">	相当于:*/</span></span><br><span class="line">	<span class="keyword">var</span> num;</span><br><span class="line">	<span class="title function_">alert</span>(num);</span><br><span class="line">	num=<span class="number">10</span>;</span><br><span class="line">	<span class="title function_">alert</span>(num);</span><br><span class="line"><span class="comment">//函数也会声明提升,预编译时会将函数提到代码最前面</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//总结：在当前作用域，声明变量和函数，会直接提升在整个代码的最前面运行</span></span><br></pre></td></tr></table></figure>

<ul>
<li>省略var声明变量<ul>
<li>变量会被强制声明成全局变量</li>
</ul>
</li>
</ul>
<h3 id="8-二维数组"><a href="#8-二维数组" class="headerlink" title="8. 二维数组"></a>8. 二维数组</h3><ul>
<li>来源：数组中每一个元素，元素可以是任意数据类型，元素可以是数组，数组存数组是存的数组地址</li>
<li>二维数组：人为起的</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">通过循环按顺序为一个5x5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> arr = &#123;</span><br><span class="line">    [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>],</span><br><span class="line">    [<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>],</span><br><span class="line">    [<span class="number">11</span>,<span class="number">12</span>,<span class="number">13</span>,<span class="number">14</span>,<span class="number">15</span>],</span><br><span class="line">    [<span class="number">16</span>,<span class="number">17</span>,<span class="number">18</span>,<span class="number">19</span>,<span class="number">20</span>],</span><br><span class="line">    [<span class="number">21</span>,<span class="number">22</span>,<span class="number">23</span>,<span class="number">24</span>,<span class="number">25</span>]</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//打印靠左三角形图案</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;=i;j++)&#123;</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;o&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;&lt;br/&gt;&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//结合一下</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;=i;j++)&#123;</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">write</span>(arr[i][j]+<span class="string">&quot; &quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;&lt;br/&gt;&quot;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="9-冒泡和选择排序"><a href="#9-冒泡和选择排序" class="headerlink" title="9. 冒泡和选择排序"></a>9. 冒泡和选择排序</h3><p>冒泡排序：</p>
<ul>
<li>规则：前后两个数两两进行比较，如果符合交换条件就换位</li>
<li>规律：冒泡排序每过一轮排序，都可以找出一个较大的数，放在正确的位置</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">9</span>,<span class="number">8</span>,<span class="number">4</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>-<span class="number">1</span>;i++)&#123;</span><br><span class="line">	<span class="comment">//每一轮比较的次数</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;arr.<span class="property">length</span>-(i+<span class="number">1</span>);j++)&#123;</span><br><span class="line">		<span class="keyword">if</span>(arr[j]&gt;arr[j+<span class="number">1</span>])&#123;</span><br><span class="line">			<span class="comment">//交换位置</span></span><br><span class="line">			<span class="keyword">var</span> tmp = arr[j];</span><br><span class="line">            arr[j]=arr[j+<span class="number">1</span>];</span><br><span class="line">            arr[j+<span class="number">1</span>]=tmp;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>选择排序（打擂台）：</p>
<ul>
<li>规则：选出一个位置，这个位置上的数，和后面所有的数进行比较，如果比较出大小就交换位置。</li>
<li>规律：每一轮都能选出一个最小的数，放在正确位置</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">9</span>,<span class="number">8</span>,<span class="number">4</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>-<span class="number">1</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j=i+<span class="number">1</span>;j&lt;arr.<span class="property">length</span>;j++)&#123;</span><br><span class="line">    	<span class="keyword">if</span>(arr[i]&gt;arr[j])&#123;</span><br><span class="line">            <span class="keyword">var</span> tmp=arr[i];</span><br><span class="line">            arr[i]=arr[j];</span><br><span class="line">            arr[j]=tmp;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="10-数组练习"><a href="#10-数组练习" class="headerlink" title="10.数组练习"></a>10.数组练习</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//随机给出一个五位以内的数，然后输出该数共有多少位，每位分别是什么</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">count0fNum</span>(<span class="params">num</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=[];</span><br><span class="line">    <span class="keyword">while</span>(num)&#123;</span><br><span class="line">        arr.<span class="title function_">unshift</span>(num % <span class="number">10</span>);</span><br><span class="line">        num = <span class="built_in">parseInt</span>(num/<span class="number">10</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;一共是：&quot;</span>+arr.<span class="property">length</span>+<span class="string">&quot;位，每一位分别是&quot;</span>+arr)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//编写函数has(arr,60)判断数组中是否存在60这个元素，返回布尔类型</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">has</span>(<span class="params">arr,item</span>)&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">        <span class="keyword">if</span>(arr[i]===item)&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">生成13位条形码</span></span><br><span class="line"><span class="comment">	Ean-13码规则：第十三位数字是前十二位数字经过计算得到的校验码。</span></span><br><span class="line"><span class="comment">	例如：690123456789</span></span><br><span class="line"><span class="comment">	第十三位计算其验证码的过程为：</span></span><br><span class="line"><span class="comment">	@前十二位的奇数位和6+0+2+4+6+8=26</span></span><br><span class="line"><span class="comment">	@前十二位的偶数位和9+1+3+5+7+9=34</span></span><br><span class="line"><span class="comment">	@将奇数和与偶数和的三倍相加26+34*3=128</span></span><br><span class="line"><span class="comment">	@取结果的个位数：128的个位数为8</span></span><br><span class="line"><span class="comment">	@用10减去这个个位数10-8=2</span></span><br><span class="line"><span class="comment">	所以校验码为2（如果结果个位数为0，校验码为0）</span></span><br><span class="line"><span class="comment">	例如：输入692223361219输出6922233612192</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">functino <span class="title function_">ean13</span>(<span class="params">num</span>)&#123;</span><br><span class="line">    <span class="comment">//1、将其中每一位数取下来</span></span><br><span class="line">    <span class="keyword">var</span> arr=[];</span><br><span class="line">    <span class="keyword">while</span>(num)&#123;</span><br><span class="line">        arr.<span class="title function_">unshift</span>(num%<span class="number">10</span>);</span><br><span class="line">        <span class="built_in">parseInt</span>(num/<span class="number">10</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> odd=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">var</span> even=<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">        <span class="keyword">if</span>(i%<span class="number">2</span>==<span class="number">0</span>)&#123;</span><br><span class="line">            <span class="comment">//奇数</span></span><br><span class="line">            odd += arr[i];</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            <span class="comment">//偶数</span></span><br><span class="line">            even += arr[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> sum=(odd+even*<span class="number">3</span>)%<span class="number">10</span>;</span><br><span class="line">    <span class="keyword">if</span>(sum)&#123;</span><br><span class="line">        sum=<span class="number">10</span>-sum;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//生成第13位数</span></span><br><span class="line">    arr.<span class="title function_">push</span>(sum);</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Number</span>(arr.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="五-JavaScript-ECMA5"><a href="#五-JavaScript-ECMA5" class="headerlink" title="五. JavaScript-ECMA5"></a>五. JavaScript-ECMA5</h2><h3 id="1-ECMA5严格模式"><a href="#1-ECMA5严格模式" class="headerlink" title="1.ECMA5严格模式"></a>1.ECMA5严格模式</h3><ul>
<li><p>简介：除正常运行模式，ECMAscript 5 添加了第二种运行模式：“严格模式”(strict mode)。顾名思义，这种模式使得Javascript在更严格的条件下运行。</p>
</li>
<li><p>目的：</p>
<ol>
<li>消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。</li>
<li>消除代码运行的一些不安全之处，保证代码运行安全。</li>
<li>提高编译器效率，增加运行速度。</li>
<li>为未来新版本的Javascript做好铺垫。</li>
</ol>
</li>
<li><p>格式：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">严格模式：写在哪个作用内下，就在哪个作用域内生效。</span></span><br><span class="line"><span class="comment">&quot;use strict&quot;;</span></span><br><span class="line"><span class="comment">注：尽量注意不要把严格模式写在全局。</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="1-1-严格模式的行为变更"><a href="#1-1-严格模式的行为变更" class="headerlink" title="1.1.严格模式的行为变更"></a>1.1.严格模式的行为变更</h4><ol>
<li><p>全局变量声明时，必须加var</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="string">&quot;use strict&quot;</span>;</span><br><span class="line">	a=<span class="number">10</span>;<span class="comment">//报错，因为a没有被var声明</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>this无法指向全局对象。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="string">&quot;use strict&quot;</span>;</span><br><span class="line">	<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params"></span>)&#123;</span><br><span class="line">    	<span class="variable language_">this</span>.<span class="property">b</span>=<span class="number">10</span>;<span class="comment">//报错，因为this是undefined </span></span><br><span class="line">    &#125;</span><br><span class="line">	<span class="title function_">a</span>()</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数内重名属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="string">&quot;use strict&quot;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">a</span>(<span class="params">b,b,c</span>)&#123;</span><br><span class="line">        <span class="comment">//语法错误：上下文中不允许重复的参数名称</span></span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>arguments对象不允许被动态改变 ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">num1,num2</span>)&#123;</span><br><span class="line">    <span class="string">&quot;use strict&quot;</span>;</span><br><span class="line">    num1=<span class="string">&quot;hello&quot;</span>;</span><br><span class="line">    <span class="title function_">alert</span>(num1+<span class="string">&quot;,&quot;</span>+num2);<span class="comment">//hello,20</span></span><br><span class="line"> 	<span class="title function_">alert</span>(<span class="variable language_">arguments</span>[<span class="number">0</span>]+<span class="string">&quot;,&quot;</span>+<span class="variable language_">arguments</span>[<span class="number">1</span>])<span class="comment">//10,20</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">show</span>(<span class="number">10</span>,<span class="number">20</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>新增保留字：implements,interface,let,package,private,protected,public,static,yield。</p>
<p>注：保留字不能声明为变量名</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="string">&quot;use strict&quot;</span>;</span><br><span class="line">	<span class="keyword">function</span> <span class="title function_">package</span>(<span class="params">protected</span>)&#123;<span class="comment">//语法错误</span></span><br><span class="line">        <span class="keyword">var</span> implements;<span class="comment">//语法错误</span></span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="2-ECMA5新增数组方法"><a href="#2-ECMA5新增数组方法" class="headerlink" title="2.ECMA5新增数组方法"></a>2.ECMA5新增数组方法</h3><h4 id="1-indexOf-方法"><a href="#1-indexOf-方法" class="headerlink" title="1. indexOf()方法"></a>1. indexOf()方法</h4><ul>
<li><p>格式:数组.index(item,start)</p>
</li>
<li><p>参数：</p>
<ul>
<li>item：任意数据</li>
<li>start：下标 可以不传入，默认为0</li>
</ul>
</li>
<li><p>功能：在数组中查找第一次出现item元素的下标，从start开始查找</p>
</li>
<li><p>返回值：</p>
<ul>
<li>-1 没有查找到</li>
<li>大于等于0</li>
</ul>
</li>
<li><p>举例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">var</span> index = arr.<span class="title function_">indexOf</span>(<span class="number">20</span>,<span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(index);</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="2-forEach-循环"><a href="#2-forEach-循环" class="headerlink" title="2.forEach()循环"></a>2.forEach()循环</h4><ul>
<li>数组遍历方法：<ul>
<li>for循环</li>
<li>for…in</li>
<li>forEach(ECMA5新增)</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    	item当前遍历到的元素</span></span><br><span class="line"><span class="comment">    	index当前遍历到元素的下标</span></span><br><span class="line"><span class="comment">    	arr数组本身</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ul>
<li>彩蛋：forEach出来的时候被抵制了一段时间，理由是forEach 屏蔽了初学者对于循环的理解。</li>
</ul>
<h4 id="3-map-方法"><a href="#3-map-方法" class="headerlink" title="3.map()方法"></a>3.map()方法</h4><ul>
<li>映射：根据固定的运算公式把原来的数经过公式算出结果放在对应下标里</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">map</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="comment">//遍历要做的事情</span></span><br><span class="line">    <span class="keyword">return</span> item*<span class="number">1.3</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="title function_">alert</span>(newArr)<span class="comment">//;12,26,39,52,65</span></span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//10,20,30,40,50</span></span><br></pre></td></tr></table></figure>

<h4 id="4-filter-过滤"><a href="#4-filter-过滤" class="headerlink" title="4.filter()过滤"></a>4.filter()过滤</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">5</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> item&gt;<span class="number">2</span>;<span class="comment">//找出所有大于2的元素</span></span><br><span class="line">&#125;);<span class="comment">//结果：[5,3,4,5]，不改变原数组新生成数组</span></span><br></pre></td></tr></table></figure>

<h4 id="5-some-方法"><a href="#5-some-方法" class="headerlink" title="5.some()方法"></a>5.some()方法</h4><ul>
<li>功能：在数组中查找是否有符合条件的元素，有返回true，没有返回false。</li>
<li>短路操作：只要找到符合条件的元素，后面的循环就停止了。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">some</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="comment">//遍历要做的事情</span></span><br><span class="line">    <span class="keyword">return</span> item&gt;<span class="number">20</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="6-every-方法"><a href="#6-every-方法" class="headerlink" title="6.every()方法"></a>6.every()方法</h4><ul>
<li>功能：在数组中查找是否每一个元素都符合条件，有返回true，没有返回false。</li>
<li>短路操作：只要找到不符合条件的元素，后面循环停止。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">every</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> item&gt;<span class="number">20</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="7-reduce-归并"><a href="#7-reduce-归并" class="headerlink" title="7.reduce()归并"></a>7.reduce()归并</h4><ul>
<li>归并：先把前两个数并一块，然后再并第二个第三个</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">reduce</span>(<span class="keyword">function</span>(<span class="params">prev,next,index,arr</span>)&#123;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    prev 第一次 下标为0的元素</span></span><br><span class="line"><span class="comment">    	 第二次开始 上一次遍历return的值</span></span><br><span class="line"><span class="comment">    	 </span></span><br><span class="line"><span class="comment">    next 从下标1开始，当前遍历到的元素</span></span><br><span class="line"><span class="comment">    arr数组本身</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="title function_">alert</span>(prev+<span class="string">&quot;,&quot;</span>+next);</span><br><span class="line">    <span class="keyword">return</span> prev + next;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="title function_">alert</span>(newArr)</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">10,20</span></span><br><span class="line"><span class="comment">30,30</span></span><br><span class="line"><span class="comment">60,40</span></span><br><span class="line"><span class="comment">100,50</span></span><br><span class="line"><span class="comment">150</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h2 id="六-JavaScript-字符串"><a href="#六-JavaScript-字符串" class="headerlink" title="六. JavaScript-字符串"></a>六. JavaScript-字符串</h2><h3 id="1-字符串的基本概念"><a href="#1-字符串的基本概念" class="headerlink" title="1.字符串的基本概念"></a>1.字符串的基本概念</h3><ul>
<li>字符串概念：所有带单引号或双引号的都叫字符串</li>
<li>字符串的声明：<ul>
<li>通过new运算符去声明字符串</li>
<li>省略new声明字符串</li>
<li>字符串常量复制</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str =<span class="keyword">new</span> <span class="title class_">String</span>(<span class="number">100</span>);</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> str);<span class="comment">//object</span></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="title class_">String</span>(<span class="number">100</span>);</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> str1);<span class="comment">//string</span></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&quot;100&quot;</span>;</span><br><span class="line"><span class="title function_">alert</span>(<span class="keyword">typeof</span> str2);<span class="comment">//string</span></span><br></pre></td></tr></table></figure>

<ul>
<li>访问字符串中的字符的个数：<ul>
<li>字符串.length  访问字符串中字符的个数</li>
<li>注：中文字符集，utf-8(三个字符表示一个汉字) gbk（两个字符表示一个汉字） <strong>在计数的时候都是当作一个汉字计数</strong></li>
</ul>
</li>
<li>访问字符串中单个字符：<ul>
<li>字符串.charAt(下标)  <strong>从0开始</strong></li>
<li>字符串[下标]</li>
</ul>
</li>
<li><strong>注意</strong>：字符串只读，一旦被声明没办法修改，如果非要修改，只能将原字符串销毁再生成</li>
<li><strong>注意</strong>：在JS中，字符串既是基本数据类型也是符合数据类型。</li>
<li>字符串遍历：<ul>
<li>for循环</li>
</ul>
</li>
</ul>
<h3 id="2-字符串方法"><a href="#2-字符串方法" class="headerlink" title="2.字符串方法"></a>2.字符串方法</h3><h4 id="1-不常用字符串方法格式：字符串-函数名"><a href="#1-不常用字符串方法格式：字符串-函数名" class="headerlink" title="1.不常用字符串方法格式：字符串.函数名()"></a>1.不常用字符串方法格式：字符串.函数名()</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">big</span>()		大好字体显示字符串</span><br><span class="line"><span class="title function_">blink</span>()		显示闪动字符串（ie无效）</span><br><span class="line"><span class="title function_">bold</span>()		粗体显示字符串</span><br><span class="line"><span class="title function_">fixed</span>()		以打字机文本显示字符串</span><br><span class="line"><span class="title function_">strike</span>()	使用删除线来显示字符串</span><br><span class="line"><span class="title function_">fontcolor</span>()	指定颜色显示字符串</span><br><span class="line"><span class="title function_">fontsize</span>()	指定尺寸显示字符串</span><br><span class="line"><span class="title function_">link</span>()		字符串显示为链接</span><br><span class="line"><span class="title function_">sub</span>()		字符串显示为下标</span><br><span class="line"><span class="title function_">sup</span>()		字符串显示为上标</span><br><span class="line"><span class="comment">//document.write()中使用,用特殊样式输出字符串</span></span><br></pre></td></tr></table></figure>

<h4 id="2-字符串获取方法"><a href="#2-字符串获取方法" class="headerlink" title="2.字符串获取方法"></a>2.字符串获取方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">charAt</span>(<span class="number">3</span>) <span class="comment">//获取下标为3的字符</span></span><br><span class="line"><span class="title function_">charCodeAt</span>(<span class="number">3</span>) <span class="comment">//获取下标为3的字符的编码</span></span><br><span class="line"><span class="comment">//上面2个方法使用字符串对象调用</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">fromCharCode</span>(<span class="number">94</span>) <span class="comment">//编码转换成字符串</span></span><br><span class="line"><span class="comment">//该方法是String静态方法,所以用String调用，</span></span><br><span class="line">如：<span class="keyword">var</span> str = <span class="title class_">String</span>.<span class="title function_">fromCharCode</span>(<span class="number">98</span>,<span class="number">99</span>);</span><br></pre></td></tr></table></figure>

<h4 id="3-字符串查找方法"><a href="#3-字符串查找方法" class="headerlink" title="3.字符串查找方法"></a>3.字符串查找方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">indexOf()</span></span><br><span class="line"><span class="comment">	格式：supStr.indexOf(subStr,start);</span></span><br><span class="line"><span class="comment">	参数：第一个，要查的字符串</span></span><br><span class="line"><span class="comment">		 start 从哪个下标开始 默认为0</span></span><br><span class="line"><span class="comment">	功能：在supStr中查找subStr第一次出现的位置，从start这个位置开始查找。</span></span><br><span class="line"><span class="comment">    返回值：-1 没有找到</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> supStr=<span class="string">&quot;abcabcabc&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> subStr=<span class="string">&quot;abc&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">indexOf</span>(subStr);<span class="comment">//0</span></span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">indexOf</span>(subStr,<span class="number">1</span>);<span class="comment">//3</span></span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">indexOf</span>(subStr,<span class="number">4</span>);<span class="comment">//6</span></span><br><span class="line"><span class="comment">//======================================================</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">lastIndexOf()</span></span><br><span class="line"><span class="comment">	格式：supStr.lastIndexOf(subStr);</span></span><br><span class="line"><span class="comment">	功能：在supStr中查找subStr最后一次出现的位置</span></span><br><span class="line"><span class="comment">	参数：第二个参数是开始查找的索引位置，查找方向是从右往左</span></span><br><span class="line"><span class="comment">	返回值：-1 没有找到</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> supStr=<span class="string">&quot;abcabcabc&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> subStr=<span class="string">&quot;abc&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">lastIndexOf</span>(subStr);<span class="comment">//6</span></span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">lastIndexOf</span>(subStr)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line">  <span class="comment">//索引值：0  1 2 3 4 5 6 7 8</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">lastIndexOf</span>(<span class="number">4</span>));<span class="comment">//4</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">lastIndexOf</span>(<span class="number">7</span>));<span class="comment">//6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">lastIndexOf</span>(<span class="number">5</span>));<span class="comment">//5</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">//======================================================</span></span><br><span class="line"><span class="comment">search()</span></span><br><span class="line"><span class="comment">	格式：supStr.search(subStr);</span></span><br><span class="line"><span class="comment">	参数：字符串/正则表达式</span></span><br><span class="line"><span class="comment">	功能：在supStr中查找subStr第一次出现的位置</span></span><br><span class="line"><span class="comment">    返回值：-1 没有查找到</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> supStr=<span class="string">&quot;Abcabcabc&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> subStr=<span class="string">&quot;/abc/i&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> index = supStr.<span class="title function_">search</span>(subStr);<span class="comment">//0</span></span><br></pre></td></tr></table></figure>

<h4 id="4-字符串提取方法"><a href="#4-字符串提取方法" class="headerlink" title="4.字符串提取方法"></a>4.字符串提取方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">substring</span></span><br><span class="line"><span class="comment">	格式：字符串.substring(start,end);</span></span><br><span class="line"><span class="comment">	功能：将字符串中[start,end)提取这部分字符，生成新字符串</span></span><br><span class="line"><span class="comment">	返回值：新字符串</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr=str.<span class="title function_">substring</span>(<span class="number">1</span>,<span class="number">4</span>);</span><br><span class="line"><span class="title function_">alert</span>(newStr);<span class="comment">//ell</span></span><br><span class="line"><span class="title function_">alert</span>(str);<span class="comment">//hello</span></span><br><span class="line"><span class="comment">//======================================================</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">substr</span></span><br><span class="line"><span class="comment">	格式:字符串.substr(start,length);</span></span><br><span class="line"><span class="comment">	返回值：新字符串</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.<span class="title function_">substr</span>(<span class="number">1</span>,<span class="number">3</span>);</span><br><span class="line"><span class="title function_">alert</span>(newStr);<span class="comment">//ell</span></span><br><span class="line"><span class="title function_">alert</span>(str)<span class="comment">//hello</span></span><br><span class="line"><span class="comment">//======================================================</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">slice(数组方法)</span></span><br><span class="line"><span class="comment">	格式：字符串.slice(start,end);</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> newStr=str.<span class="title function_">slice</span>(<span class="number">1</span>,<span class="number">4</span>);</span><br><span class="line"><span class="title function_">alert</span>(newStr);<span class="comment">//ell</span></span><br><span class="line"><span class="title function_">alert</span>(str);<span class="comment">//hello</span></span><br></pre></td></tr></table></figure>

<h4 id="5-字符串替换分割"><a href="#5-字符串替换分割" class="headerlink" title="5.字符串替换分割"></a>5.字符串替换分割</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">replace() 字符串替换</span></span><br><span class="line"><span class="comment">	格式：supStr.replace(oldStr,newStr);</span></span><br><span class="line"><span class="comment">	功能：用newStr将oldStr，替换，生成新字符串。</span></span><br><span class="line"><span class="comment">	参数：</span></span><br><span class="line"><span class="comment">		第一个参数传入的是字符串只能替换一次。</span></span><br><span class="line"><span class="comment">		第一个参数可以传入正则表达式</span></span><br><span class="line"><span class="comment">	返回值：新生成的字符串。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;how are are you&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.<span class="title function_">replace</span>(<span class="string">&quot;are&quot;</span>,<span class="string">&quot;old are&quot;</span>)</span><br><span class="line"><span class="keyword">var</span> newStr2 = str.<span class="title function_">replace</span>(<span class="string">&quot;/are/g&quot;</span>,<span class="string">&quot;old are&quot;</span>)</span><br><span class="line"><span class="title function_">alert</span>(newStr);<span class="comment">//how old are are you</span></span><br><span class="line"><span class="title function_">alert</span>(str);<span class="comment">//how are are you</span></span><br><span class="line"><span class="title function_">alert</span>(newStr2);<span class="comment">//how old are old are you</span></span><br><span class="line"><span class="comment">//======================================================</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">split() 字符串分割</span></span><br><span class="line"><span class="comment">	格式：字符串.split(分隔符，length)</span></span><br><span class="line"><span class="comment">	参数：</span></span><br><span class="line"><span class="comment">		第一个参数，用这个分隔符对字符串进行分割</span></span><br><span class="line"><span class="comment">		第二个参数，控制返回的数组的元素格式，一般不用</span></span><br><span class="line"><span class="comment">	功能：用分隔符对原字符串分割分割玩的字串放在数组中返回</span></span><br><span class="line"><span class="comment">	返回值：数组</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;how are are you&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.<span class="title function_">split</span>(<span class="string">&quot; s&quot;</span>)</span><br><span class="line"><span class="title function_">alert</span>(newStr);<span class="comment">//how,are,you</span></span><br><span class="line"><span class="title function_">alert</span>(str);<span class="comment">//how are you</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">注意：1.相邻两个分隔符，会产生空字符串。</span></span><br><span class="line"><span class="comment">	 2.分割符是空字符串&quot;&quot;,直接将每一个字符单独分割成字串,放在数组中返回。</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h4 id="6-字符串转大小写"><a href="#6-字符串转大小写" class="headerlink" title="6.字符串转大小写"></a>6.字符串转大小写</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	toLowerCase() 转成全小写</span></span><br><span class="line"><span class="comment">	toUpperCase() 转成全大写</span></span><br><span class="line"><span class="comment">	注：生成新字符串</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="3-字符串练习"><a href="#3-字符串练习" class="headerlink" title="3.字符串练习"></a>3.字符串练习</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1、将字符串str=&quot;When I was young,I love a girl in neighbor class.&quot;中，从young提取到girl生成新字符串</span></span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;When I was young,I love a girl in neighbor class.&quot;</span></span><br><span class="line"><span class="keyword">var</span> start = str.<span class="title function_">indexOf</span>(<span class="string">&quot;young&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> end=str.<span class="title function_">indexOf</span>(<span class="string">&quot;girl&quot;</span>)+<span class="string">&quot;girl&quot;</span>.<span class="property">length</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.<span class="title function_">substring</span>(start,end);</span><br><span class="line"><span class="title function_">alert</span>(newStr);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">2、将字符中单词用空格隔开，已知传入的字符串只有字母，每个单词首字母大写，把每个单词用空格隔开，值保留第一个单词首字母大写</span></span><br><span class="line"><span class="comment">传入：&quot;HelloMyWorld&quot;</span></span><br><span class="line"><span class="comment">返回：&quot;Hello my world&quot;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">思路</span></span><br><span class="line"><span class="comment">1、字符串转数组 split(&quot;&quot;)</span></span><br><span class="line"><span class="comment">2、数组转字符串 join(&quot;&quot;)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">wordOfStr</span>(<span class="params">str</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=str.<span class="title function_">split</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">        <span class="keyword">if</span>(arr[i]&gt;=<span class="string">&quot;A&quot;</span>&amp;&amp;arr[i]&lt;=<span class="string">&quot;Z&quot;</span>)&#123;</span><br><span class="line">            <span class="comment">//大写转小写，插空格</span></span><br><span class="line">            arr[i]=arr[i].<span class="title function_">toLowerCase</span>();</span><br><span class="line">            arr.<span class="title function_">splice</span>(i,<span class="number">0</span>,<span class="string">&quot; &quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">wordOfStr</span>(<span class="string">&quot;HelloMyWorld&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">3.将字符串安单词进行排序，空格作为划分单词的唯一条件</span></span><br><span class="line"><span class="comment">传入&quot;Welcome to Beijing&quot;</span></span><br><span class="line"><span class="comment">改为&quot;Beijing to Welcome&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">reverseStr</span>(<span class="params">str</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=arr.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-字符串验证码生成"><a href="#4-字符串验证码生成" class="headerlink" title="4.字符串验证码生成"></a>4.字符串验证码生成</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//纯数字验证码</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">numTestCode</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=[];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;n;i++)&#123;</span><br><span class="line">        <span class="keyword">var</span> num=<span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>()*<span class="number">10</span>);</span><br><span class="line">        arr.<span class="title function_">push</span>(num);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//字母数字验证码</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">0-9</span></span><br><span class="line"><span class="comment">a-z 97-122</span></span><br><span class="line"><span class="comment">A-Z 65-90</span></span><br><span class="line"><span class="comment">随机ASCII码值</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">testCode</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> arr=[];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;n;i++)&#123;</span><br><span class="line">        <span class="keyword">var</span> num=<span class="built_in">parseInt</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>()*<span class="number">123</span>);</span><br><span class="line">        <span class="keyword">if</span>(num&gt;=<span class="number">0</span>&amp;&amp;num&lt;=<span class="number">9</span>)&#123;</span><br><span class="line">            arr.<span class="title function_">push</span>(num);</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(num&gt;=<span class="number">97</span>&amp;&amp;num&lt;=<span class="number">122</span>||num&gt;=<span class="number">65</span>&amp;&amp;&lt;=<span class="number">90</span>)&#123;</span><br><span class="line">            arr.<span class="title function_">push</span>(<span class="title class_">String</span>.<span class="title function_">fromCharCode</span>(num));</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            i--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="七-JavaScript-对象"><a href="#七-JavaScript-对象" class="headerlink" title="七. JavaScript-对象"></a>七. JavaScript-对象</h2><h3 id="1-认识对象"><a href="#1-认识对象" class="headerlink" title="1. 认识对象"></a>1. 认识对象</h3><ul>
<li><p>发展历史</p>
<ul>
<li><p>汇编语言：</p>
<ul>
<li>汇编、C语言	面向过程语言</li>
<li>Java、C++、javaScript、Object-c python 面向对象语言</li>
</ul>
</li>
<li><p>思想：</p>
<ul>
<li><p>面向过程→面向对象</p>
</li>
<li><p>面向过程：只考虑数学逻辑</p>
</li>
<li><p>面向对象：分析实体、设计实体属性功能、实体间相互作用，对生活逻辑的映射。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//一辆车60km/h，一条路100km，问跑完时间</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	面向过程：var hours=100/60;</span></span><br><span class="line"><span class="comment">	面向对象：</span></span><br><span class="line"><span class="comment">		车</span></span><br><span class="line"><span class="comment">			速度 60km/h</span></span><br><span class="line"><span class="comment">			功能 跑路上</span></span><br><span class="line"><span class="comment">		路</span></span><br><span class="line"><span class="comment">			属性</span></span><br><span class="line"><span class="comment">				length 100km</span></span><br><span class="line"><span class="comment">		让车真的跑在路上得出结果</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//贪吃蛇</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	面向过程：坐标 蛇速度</span></span><br><span class="line"><span class="comment">	面向对象：</span></span><br><span class="line"><span class="comment">		蛇</span></span><br><span class="line"><span class="comment">		食物</span></span><br><span class="line"><span class="comment">		砖块</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
</li>
<li><p>语法</p>
<ul>
<li><p>类：一类具有相同特征事物的抽象概念。（狗</p>
</li>
<li><p>对象：具体某一个个体，唯一的实例。（小白</p>
</li>
</ul>
</li>
<li><p>举例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	1、通过new运算符声明对象</span></span><br><span class="line"><span class="comment">	2、通过省略new</span></span><br><span class="line"><span class="comment">	3、对象常量赋值（使用大括号表示对象）</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> obj1=<span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line"><span class="keyword">var</span> obj2=<span class="title class_">Object</span>();</span><br><span class="line"><span class="keyword">var</span> obj3=&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//新增属性 除加前缀使用起来和普通变量无区别</span></span><br><span class="line">obj3.<span class="property">username</span>=<span class="string">&#x27;钢铁侠&#x27;</span></span><br><span class="line">obj3.<span class="property">age</span>=<span class="number">18</span>;</span><br><span class="line"><span class="title function_">alert</span>(obj3.<span class="property">username</span>);</span><br><span class="line"><span class="title function_">alert</span>(obj3.<span class="property">age</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过中括号设置访问</span></span><br><span class="line">obj3[<span class="string">&#x27;username&#x27;</span>]=<span class="string">&#x27;钢铁侠&#x27;</span></span><br><span class="line">obj3[<span class="string">&#x27;age&#x27;</span>]=<span class="number">18</span>;</span><br><span class="line"><span class="title function_">alert</span>(obj3[<span class="string">&#x27;username&#x27;</span>])</span><br><span class="line"><span class="title function_">alert</span>(obj3[<span class="string">&#x27;age&#x27;</span>])</span><br><span class="line"></span><br><span class="line"><span class="comment">//新增方法 除加前缀使用其阿里和普通函数没有区别</span></span><br><span class="line">obj3.<span class="property">show</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;我的名字叫&quot;</span>+obj3.<span class="property">name</span>+<span class="string">&quot;。&quot;</span>+obj3.<span class="property">age</span>+<span class="string">&quot;岁&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj3.<span class="title function_">show</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过对象常量赋值</span></span><br><span class="line"><span class="keyword">var</span> obj3=&#123;</span><br><span class="line">    <span class="attr">username</span>:<span class="string">&quot;钢铁侠&quot;</span>,</span><br><span class="line">    <span class="string">&quot;age&quot;</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">show</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;我的名字叫&quot;</span>+obj3.<span class="property">name</span>+<span class="string">&quot;。&quot;</span>+obj3.<span class="property">age</span>+<span class="string">&quot;岁&quot;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//delete 关键字 删除对象属性或方法</span></span><br><span class="line"><span class="keyword">delete</span> obj3.<span class="property">show</span>;</span><br></pre></td></tr></table></figure>


</li>
<li><p>数据结构回顾</p>
<ul>
<li>基本数据类型（存储一个值</li>
<li>数组（存储多个值</li>
<li>对象（不仅可以存储多个值，还能存储函数</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//上面车的例子</span></span><br><span class="line"><span class="keyword">var</span> car=&#123;</span><br><span class="line">    <span class="attr">speed</span>:<span class="number">60</span>,</span><br><span class="line">    <span class="attr">run</span>:<span class="keyword">function</span>(<span class="params">road</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> road.<span class="property">length</span>/car.<span class="property">length</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> gaosugonglu=&#123;</span><br><span class="line">  	<span class="attr">length</span>:<span class="number">100</span> </span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> hours=car.<span class="title function_">run</span>(gaosugonglu);</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;一共花了&quot;</span>+hours.<span class="title function_">toFixed</span>(<span class="number">2</span>)+<span class="string">&quot;小时&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="2-常用Math对象方法"><a href="#2-常用Math对象方法" class="headerlink" title="2. 常用Math对象方法"></a>2. 常用Math对象方法</h3><ul>
<li>万物皆为对象</li>
<li>数学运算函数Math对象</li>
</ul>
<ol>
<li>Math.random() 返回0~1之间随机数</li>
<li>Math.max(num1,num2) 返回较大的数</li>
<li>Math.min(num1,num2) 返回较小的数</li>
<li>Math.abs(num) 绝对值</li>
<li>Math.round() 四舍五入（成整数，只看小数点后一位）</li>
<li>Math.ceil(19.3) 向上取整</li>
<li>Math.floor(11.8) 向下取整</li>
<li>Math.pow(x,y) x的y次方</li>
<li>Math.sqrt(num) 开平方</li>
</ol>
<h3 id="3-日期对象"><a href="#3-日期对象" class="headerlink" title="3. 日期对象"></a>3. 日期对象</h3><ul>
<li><p>声明</p>
<ul>
<li><p>没有传参：当前系统时间</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> d=<span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="title function_">alert</span>(d);<span class="comment">//Wed Oct 09 2019 09:01:01 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="comment">// GMT 格林尼治时间</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>传参：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">参数：</span></span><br><span class="line"><span class="comment">1.字符串 &quot;2000-01-01&quot;</span></span><br><span class="line"><span class="comment">Sat Jan 01 2000 08:00:00 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">2.数字(按顺序 年月日时分秒毫秒)</span></span><br><span class="line"><span class="comment">	注：月份从0开始</span></span><br><span class="line"><span class="comment">var d=new Date(2000,1,1,8,30,50);</span></span><br><span class="line"><span class="comment">Tue Feb 01 2000 08:30:50 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">3.数字(毫秒数)</span></span><br><span class="line"><span class="comment">	起点：1970/1/1 0:0:0</span></span><br><span class="line"><span class="comment">var d=new Date(1000);</span></span><br><span class="line"><span class="comment">Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="4-日期对象方法"><a href="#4-日期对象方法" class="headerlink" title="4. 日期对象方法"></a>4. 日期对象方法</h3><h4 id="4-1-格化式方法（了解）"><a href="#4-1-格化式方法（了解）" class="headerlink" title="4.1. 格化式方法（了解）"></a>4.1. 格化式方法（了解）</h4><table>
<thead>
<tr>
<th>方法</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td>box.toDateString()</td>
<td>特定格式显示星期几、月、日和年</td>
</tr>
<tr>
<td>box.totimeString()</td>
<td>特定格式显示时、分、秒和时区</td>
</tr>
<tr>
<td>box.toLocaleDateString()</td>
<td>特定地区格式显示星期几、月、日和年</td>
</tr>
<tr>
<td>box.toLocaleTimeString()</td>
<td>特定地区格式显示时、分、秒和时区</td>
</tr>
<tr>
<td>box.toUTCString()</td>
<td>特定格式显示完整UTC日期</td>
</tr>
</tbody></table>
<h4 id="4-2-常用方法（重点）"><a href="#4-2-常用方法（重点）" class="headerlink" title="4.2.常用方法（重点）"></a>4.2.常用方法（重点）</h4><ul>
<li>set&#x2F;get既能获取又能赋值 get只能获取</li>
<li><strong>set&#x2F;getDate()</strong><ul>
<li>从Date对象中返回一个月中的某一天(1~31)</li>
</ul>
</li>
<li><strong>getDay()</strong><ul>
<li>从Date对象返回一周中的某一天（0~6）</li>
</ul>
</li>
<li><strong>set&#x2F;getMonth()</strong><ul>
<li>从Date对象中返回月份（0~11）</li>
</ul>
</li>
<li><strong>set&#x2F;getFullYear()</strong><ul>
<li>从Date对象以四位数返回年份</li>
</ul>
</li>
<li><strong>set&#x2F;getHours()</strong><ul>
<li>返回Date对象的小时（0~23）</li>
</ul>
</li>
<li><strong>set&#x2F;getMinutes()</strong><ul>
<li>返回Date对象的分钟（0~59）</li>
</ul>
</li>
<li><strong>set&#x2F;getSeconds()</strong><ul>
<li>返回Date对象的秒数（0~59）</li>
</ul>
</li>
<li><strong>set&#x2F;getMilliseconds()</strong><ul>
<li>返回Date对象的毫秒</li>
</ul>
</li>
<li><strong>set&#x2F;getTime()</strong><ul>
<li>返回1970年1月1日至今的毫秒数</li>
</ul>
</li>
<li><strong>getTimezoneOffset()</strong><ul>
<li>返回本地时间与格林威治标准时间（GMT）的分钟差</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="keyword">var</span> year = d.<span class="title function_">getFullYear</span>();</span><br><span class="line"><span class="keyword">var</span> month = d.<span class="title function_">getMonth</span>()+<span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> date = d.<span class="title function_">getDate</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> week = d.<span class="title function_">getDay</span>()<span class="comment">//0~6 0是星期天</span></span><br><span class="line"><span class="keyword">var</span> min = d.<span class="title function_">getMinutes</span>();</span><br><span class="line"><span class="keyword">var</span> sec = d.<span class="title function_">getSeconds</span>();</span><br></pre></td></tr></table></figure>

<h4 id="4-3-日期练习"><a href="#4-3-日期练习" class="headerlink" title="4.3. 日期练习"></a>4.3. 日期练习</h4><h5 id="4-3-1-日期对象转毫秒数"><a href="#4-3-1-日期对象转毫秒数" class="headerlink" title="4.3.1. 日期对象转毫秒数"></a>4.3.1. 日期对象转毫秒数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	Date.parse()</span></span><br><span class="line"><span class="comment">		格式：Date.parse(日期对象)</span></span><br><span class="line"><span class="comment">		功能：可以将日期对象转换成毫秒数</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	d.getTime()/d.setTime()</span></span><br><span class="line"><span class="comment">		格式：日期对象.getTime/setTime</span></span><br><span class="line"><span class="comment">		功能：将当前日期对象转换成毫秒数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> d=<span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Date</span>.<span class="title function_">parse</span>(d));</span><br><span class="line"><span class="title function_">alert</span>(d.<span class="title function_">getTime</span>());<span class="comment">//调用格式不一样</span></span><br></pre></td></tr></table></figure>

<h5 id="4-3-2-获取两个日期之间相差的天数"><a href="#4-3-2-获取两个日期之间相差的天数" class="headerlink" title="4.3.2. 获取两个日期之间相差的天数"></a>4.3.2. 获取两个日期之间相差的天数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">传入：&quot;xxxx-xx-xx&quot; &quot;xxxx/xx/xx&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">countOfDate</span>(<span class="params">d1,d2</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> dd1=<span class="keyword">new</span> <span class="title class_">Date</span>(d1);</span><br><span class="line">    <span class="keyword">var</span> dd2=<span class="keyword">new</span> <span class="title class_">Date</span>(d2);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> time1=dd1.<span class="title function_">getTime</span>();</span><br><span class="line">    <span class="keyword">var</span> time2=dd2.<span class="title function_">getTime</span>();</span><br><span class="line">    <span class="keyword">var</span> time=<span class="title class_">Math</span>.<span class="title function_">abs</span>(time1-time2);</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseInt</span>(time/<span class="number">1000</span>/<span class="number">3600</span>/<span class="number">24</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="4-3-2-输入n，输出n天后的时间"><a href="#4-3-2-输入n，输出n天后的时间" class="headerlink" title="4.3.2. 输入n，输出n天后的时间"></a>4.3.2. 输入n，输出n天后的时间</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">afterOfDate</span>(<span class="params">n</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> d = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">    <span class="keyword">var</span> day = d.<span class="title function_">getDate</span>();</span><br><span class="line">    d.<span class="title function_">setDate</span>(day + n);<span class="comment">//超过30 31自动进1</span></span><br><span class="line">    <span class="keyword">return</span> n</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-定时器"><a href="#5-定时器" class="headerlink" title="5. 定时器"></a>5. 定时器</h3><ul>
<li><p>格式：var timer &#x3D; setInterval(函数,毫秒数);</p>
</li>
<li><p>功能：隔对应毫秒数，执行一次传入函数</p>
</li>
<li><p>返回值：系统分配的编号</p>
</li>
<li><p>取消定时器：clearInterval(timer);</p>
</li>
<li><p>例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i==<span class="number">5</span>)&#123;</span><br><span class="line">        <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(i++ + <span class="string">&quot;&lt;br/&gt;&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(show,<span class="number">1000</span>);</span><br><span class="line"><span class="comment">//1 2 3 4 5</span></span><br><span class="line"><span class="comment">//======================================</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> show = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i==<span class="number">5</span>)&#123;</span><br><span class="line">        <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(i++ + <span class="string">&quot;&lt;br/&gt;&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//匿名函数</span></span><br><span class="line"><span class="comment">//======================================</span></span><br><span class="line"><span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i==<span class="number">5</span>)&#123;</span><br><span class="line">        <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(i++ + <span class="string">&quot;&lt;br/&gt;&quot;</span>)</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="八-JavaScript-BOM"><a href="#八-JavaScript-BOM" class="headerlink" title="八. JavaScript-BOM"></a>八. JavaScript-BOM</h2><h3 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a>1. 简介</h3><ul>
<li>browser object model(浏览器对象模型)(浏览器规则)</li>
<li>窗口树状结构：</li>
<li>window<ul>
<li>document<ul>
<li>anchors</li>
<li>forms</li>
<li>images</li>
<li>links</li>
<li>location</li>
</ul>
</li>
<li>frames</li>
<li>history</li>
<li>location</li>
<li>navigator</li>
<li>screen</li>
</ul>
</li>
</ul>
<h3 id="2-系统对话框"><a href="#2-系统对话框" class="headerlink" title="2. 系统对话框"></a>2. 系统对话框</h3><p>​	浏览器可以通过alert()、confirm()和prompt()方法调用系统对话框向用户显示信息.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//弹出警告框</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;Lee&quot;</span>)</span><br><span class="line"><span class="comment">//提示框（确定和取消）</span></span><br><span class="line"><span class="title function_">confirm</span>(<span class="string">&quot;请确定或者取消&quot;</span>);</span><br><span class="line"><span class="keyword">if</span>(<span class="title function_">confirm</span>(<span class="params">(<span class="string">&quot;请确定或者取消&quot;</span>)</span>)&#123;</span><br><span class="line">   <span class="title function_">alert</span>(<span class="string">&quot;按了确定&quot;</span>)<span class="comment">//返回true</span></span><br><span class="line">   &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">       <span class="title function_">alert</span>(<span class="string">&quot;按了取消&quot;</span>)<span class="comment">//返回false</span></span><br><span class="line">   &#125;</span><br><span class="line"><span class="comment">//输入提示框</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="title function_">prompt</span>(<span class="string">&quot;请输入一个数字&quot;</span>，<span class="number">0</span>);</span><br><span class="line"><span class="comment">//参数1：提示 ； 参数2：默认值</span></span><br><span class="line"><span class="title function_">alert</span>(num);<span class="comment">//得到输入的值</span></span><br></pre></td></tr></table></figure>

<h3 id="3-open-方法"><a href="#3-open-方法" class="headerlink" title="3. open()方法"></a>3. open()方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	功能：打开窗口</span></span><br><span class="line"><span class="comment">	open()</span></span><br><span class="line"><span class="comment">	 - 参数1：跳转url 打开一个新窗口加载url</span></span><br><span class="line"><span class="comment">	 - 参数2：字符串，给打开的窗口命名</span></span><br><span class="line"><span class="comment">	 	- 本窗口打开 _parent</span></span><br><span class="line"><span class="comment">	 	- 新建窗口打开 _blank</span></span><br><span class="line"><span class="comment">	 - 参数3：特殊含义字符串</span></span><br><span class="line"><span class="comment">	 	- 可以设置宽高</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="title function_">open</span>(<span class="string">&quot;https://www.baidu.com&quot;</span>,<span class="string">&quot;_blank&quot;</span>,<span class="string">&quot;width=400,height=400,top200,left=200&quot;</span>)</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>第三个参数属性</th>
<th>值</th>
</tr>
</thead>
<tbody><tr>
<td>channelmode&#x3D;yes|no|1|0</td>
<td>是否使用剧院模式显示窗口。默认为no。</td>
</tr>
<tr>
<td>directories&#x3D;yes|no|1|0</td>
<td>是否添加目录按钮。默认yes</td>
</tr>
<tr>
<td>funllscreen&#x3D;yes|no|1|0</td>
<td>是否使用全屏模式显示浏览器。默认no。处于全屏模式的窗口必须同时处于剧院模式。</td>
</tr>
<tr>
<td>height&#x3D;pixels</td>
<td>窗口显示区高度</td>
</tr>
<tr>
<td>left&#x3D;pixels</td>
<td>窗口x坐标</td>
</tr>
<tr>
<td>location&#x3D;yes|no|1|0</td>
<td>是否显示地址字段。默认yes</td>
</tr>
<tr>
<td>menubar&#x3D;yes|no|1|0</td>
<td>是否显示菜单栏。默认yes</td>
</tr>
<tr>
<td>resizable&#x3D;yes|no|1|0</td>
<td>窗口是否可调节尺寸。默认yes</td>
</tr>
<tr>
<td>scrollbars&#x3D;yes|no|1|0</td>
<td>是否显示滚动条。默认yes</td>
</tr>
<tr>
<td>status&#x3D;yes|no|1|0</td>
<td>是否添加状态栏。默认yes</td>
</tr>
<tr>
<td>titlebar&#x3D;yes|no|1|0</td>
<td>是否显示标题栏。默认yes</td>
</tr>
<tr>
<td>toolbar&#x3D;yes|no|1|0</td>
<td>是否显示浏览器的工具栏。默认yes</td>
</tr>
<tr>
<td>top&#x3D;pixels</td>
<td>窗口y坐标</td>
</tr>
<tr>
<td>width&#x3D;pixels</td>
<td>窗口宽度</td>
</tr>
</tbody></table>
<h3 id="3-history对象"><a href="#3-history对象" class="headerlink" title="3. history对象"></a>3. history对象</h3><ul>
<li>history对象是window对象的属性，它保存用户上网记录，从窗口被打开那一刻算起</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">属性</span><br><span class="line">history.<span class="property">length</span>;<span class="comment">//记录数</span></span><br><span class="line">方法</span><br><span class="line">history.<span class="title function_">back</span>()<span class="comment">//后退</span></span><br><span class="line">history.<span class="title function_">forward</span>()<span class="comment">//前进</span></span><br><span class="line">history.<span class="title function_">go</span>(num)<span class="comment">//跳转到第num个记录</span></span><br><span class="line"> - <span class="number">0</span>刷新</span><br><span class="line"> - <span class="number">2</span> 正整数 前进<span class="number">2</span>个</span><br><span class="line"> - -<span class="number">2</span> 负整数 后退<span class="number">2</span>个</span><br></pre></td></tr></table></figure>

<h3 id="4-location对象"><a href="#4-location对象" class="headerlink" title="4. location对象"></a>4. location对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>下location</span><br><span class="line"></span><br><span class="line">属性</span><br><span class="line"><span class="attr">url</span>:统一资源定位符。</span><br><span class="line"> - 协议:<span class="comment">//IP(域名)/:端口号/路径/?查询字符串#锚点</span></span><br><span class="line"></span><br><span class="line">location.<span class="property">protocal</span><span class="comment">//获取访问协议</span></span><br><span class="line"> - <span class="attr">http</span>:</span><br><span class="line"> - <span class="attr">https</span>:(证书认证协议)</span><br><span class="line"></span><br><span class="line">location.<span class="property">hostname</span><span class="comment">//获取主机名</span></span><br><span class="line"> - 一般主机名为<span class="title function_">IP</span>(网络地址) 不好记</span><br><span class="line"> - 域名：ip的别称</span><br><span class="line"></span><br><span class="line">location.<span class="property">port</span><span class="comment">//获取端口号，默认隐藏</span></span><br><span class="line"> - 当前电脑使用网络的软件，随机分配的一个编号 <span class="number">0</span>-<span class="number">65535</span></span><br><span class="line"> - 定位到当前使用网络的进程</span><br><span class="line"> - 浏览器默认端口 <span class="number">8080</span></span><br><span class="line">	- http <span class="number">80</span></span><br><span class="line"> 	- https <span class="number">443</span></span><br><span class="line"></span><br><span class="line">location.<span class="property">pathname</span><span class="comment">//获取路径</span></span><br><span class="line"></span><br><span class="line">location.<span class="property">search</span><span class="comment">//获取查询字符串</span></span><br><span class="line"> - 查询字符串格式：?name1=value1&amp;name2=value2</span><br><span class="line"></span><br><span class="line">location.<span class="property">hash</span> <span class="comment">//获取锚点</span></span><br></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">document下location</span><br><span class="line"></span><br><span class="line"><span class="title function_">alert</span><span class="params">(window.loaction===window.document.location)</span>;<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line">属性：</span><br><span class="line">方法</span><br><span class="line">    assign() <span class="comment">//跳转到指定页面，与href等效</span></span><br><span class="line">     - 产生历史记录</span><br><span class="line">    reload() <span class="comment">//刷新</span></span><br><span class="line">     - reload(<span class="literal">true</span>)<span class="comment">//不经浏览器缓存，强制重载</span></span><br><span class="line">	repalce()<span class="comment">//用新url替换当前页面</span></span><br><span class="line">     - 不产生记录</span><br></pre></td></tr></table></figure>

<h2 id="九-JavaScript-DOM"><a href="#九-JavaScript-DOM" class="headerlink" title="九. JavaScript-DOM"></a>九. JavaScript-DOM</h2><h3 id="1-元素节点的获取"><a href="#1-元素节点的获取" class="headerlink" title="1.元素节点的获取"></a>1.元素节点的获取</h3><ul>
<li>document object model(文档对象模型)<ul>
<li>document：html标签里的内容</li>
</ul>
</li>
<li>节点类型<ul>
<li>元素节点 <code>&lt;div&gt;&lt;/div&gt;</code></li>
<li>属性节点 id&#x3D;‘div1’</li>
<li>文本节点 标签里的文本</li>
</ul>
</li>
<li>元素节点的获取<ul>
<li>document.getElementById(id);<ul>
<li>功能：通过id获取符合条件的元素</li>
<li>返回值：获取到的一个节点</li>
</ul>
</li>
<li>node.getElementsByTagName(标签名);<ul>
<li>功能：从node节点开始通过标签名获取符合条件的元素节点</li>
<li>返回值：伪数组&#x2F;数组</li>
</ul>
</li>
<li>node.getElementsByClassName(class名字);(IE8以下不兼容)<ul>
<li>功能：从node节点开始通过class名字获取符合条件的元素节点</li>
<li>返回值：伪数组&#x2F;数组</li>
</ul>
</li>
<li>document.getElementsByName(name属性的值);<ul>
<li>功能：通过name属性的值获取符合条件的元素节点</li>
<li>返回值：伪数组&#x2F;数组</li>
<li>一般使用在表单元素里</li>
</ul>
</li>
<li>document.querySelector(); IE8以下不兼容<ul>
<li>返回值：一个元素节点，找到符合条件的第一个元素节点。</li>
<li>参数：字符串 CSS选择器格式字符串</li>
</ul>
</li>
<li>document.querySelectorAll() IE8以下不兼容<ul>
<li>返回值：伪数组&#x2F;数组</li>
<li>参数：字符串 CSS选择器格式字符串</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="2-获取当前有效样式"><a href="#2-获取当前有效样式" class="headerlink" title="2.获取当前有效样式"></a>2.获取当前有效样式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	查找指定元素指定CSS属性值</span></span><br><span class="line"><span class="comment">	@ elem 指定的元素</span></span><br><span class="line"><span class="comment">	@ attr 指定的CSS属性</span></span><br><span class="line"><span class="comment">	@ return 返回对指定元素查找到的css属性值</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getStyle</span>(<span class="params">elem,attr</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> elem.<span class="property">currentStyle</span> ? elem.<span class="property">currentStyle</span>[attr]:<span class="title function_">getComputedStyle</span>(elem)[attr];</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//elem.currentStyle[attr]兼容ie</span></span><br><span class="line"><span class="comment">//getComputedStyle(elem)[attr]其他</span></span><br></pre></td></tr></table></figure>

<h3 id="3-attribute和元素节点属性"><a href="#3-attribute和元素节点属性" class="headerlink" title="3.attribute和元素节点属性"></a>3.attribute和元素节点属性</h3><h4 id="3-1-attribute"><a href="#3-1-attribute" class="headerlink" title="3.1.attribute"></a>3.1.attribute</h4><ul>
<li>setAttribute()<ul>
<li>添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置&#x2F;更改值。</li>
</ul>
</li>
<li>getAttribute()<ul>
<li>返回指定属性名的属性值。</li>
</ul>
</li>
<li>removerAttribute()<ul>
<li>删除指定的属性。</li>
</ul>
</li>
<li>特点：<ul>
<li>1.class访问</li>
<li>2.支持自定义属性</li>
</ul>
</li>
</ul>
<h4 id="3-2-元素节点属性"><a href="#3-2-元素节点属性" class="headerlink" title="3.2.元素节点属性"></a>3.2.元素节点属性</h4><ul>
<li>innerHTML：获取标签间内容</li>
<li>innerText：获取标签间纯文本，不会解析标签，设置纯文本</li>
<li>outerHTML：从外标签开始到外标签借宿</li>
</ul>
<h3 id="4-获取文本子节点"><a href="#4-获取文本子节点" class="headerlink" title="4.获取文本子节点"></a>4.获取文本子节点</h3><ul>
<li>通过元素节点的子节点获取</li>
<li>获取元素子节点方法：</li>
<li>兼容ie6-8<ul>
<li>firstChild <ul>
<li>访问子节点中第一个</li>
</ul>
</li>
<li>lastChild<ul>
<li>访问子节点最后一个</li>
</ul>
</li>
<li>nextSibling<ul>
<li>下一同级节点</li>
</ul>
</li>
<li>previousSibling<ul>
<li>上一同级节点</li>
</ul>
</li>
</ul>
</li>
<li>兼容ie9-10 chrome firefox<ul>
<li>只获取元素节点</li>
<li>firstElementChild<ul>
<li>第一个节点</li>
</ul>
</li>
<li>lastElementChild<ul>
<li>最后一个节点</li>
</ul>
</li>
<li>nextElementSibling<ul>
<li>下一同级节点</li>
</ul>
</li>
<li>previousElementSibling<ul>
<li>上一同级节点</li>
</ul>
</li>
</ul>
</li>
<li>childNodes<ul>
<li>访问当前节点下所有子节点</li>
<li>获取：childNodes[]</li>
<li>特点：回车也会被当作节点</li>
</ul>
</li>
<li>children</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>nodeType</th>
<th>nodeName</th>
<th>nodeValue</th>
</tr>
</thead>
<tbody><tr>
<td>元素节点</td>
<td>1</td>
<td><strong>标签名</strong></td>
<td>null</td>
</tr>
<tr>
<td>属性节点</td>
<td>2</td>
<td>属性名</td>
<td>属性值</td>
</tr>
<tr>
<td>文本节点</td>
<td>3</td>
<td>#text</td>
<td><strong>文本内容</strong></td>
</tr>
</tbody></table>
<h3 id="5-属性节点attributes"><a href="#5-属性节点attributes" class="headerlink" title="5.属性节点attributes"></a>5.属性节点attributes</h3><ul>
<li>获取当前元素节点上的素有属性节点</li>
<li>返回值：集合对象</li>
<li>集合：无序、不重复</li>
</ul>
<p>获取其中某一个节点</p>
<ul>
<li>getNamedItem(“title”) 获取节点</li>
<li>节点.attributes.getNamedItem(“title”).nodeName; &#x2F;&#x2F;title 获取属性名</li>
<li>节点.attributes.getNamedItem(“title”).nodeType; &#x2F;&#x2F;2 获取属性类型</li>
<li>节点.attributes.getNamedItem(“title”).nodeValue; &#x2F;&#x2F;hello 获取属性值</li>
<li>繁琐，可以简化<ul>
<li>节点.attributes[“title”].nodeName; &#x2F;&#x2F;title 获取属性名</li>
<li>节点.attributes[“title”]..nodeType; &#x2F;&#x2F;2 获取属性类型</li>
<li>节点.attributes[“title”]..nodeValue; &#x2F;&#x2F;hello 获取属性值</li>
</ul>
</li>
</ul>
<h3 id="6-DOM节点操作"><a href="#6-DOM节点操作" class="headerlink" title="6. DOM节点操作"></a>6. DOM节点操作</h3><ul>
<li>document.write()<ul>
<li>覆盖页面上原有内容</li>
</ul>
</li>
<li>createElement()<ul>
<li>功能：创建一个元素节点</li>
<li>格式：document.createElement()</li>
<li>参数：标签名</li>
<li>返回值：创建好的这个节点</li>
</ul>
</li>
<li>appendChild()<ul>
<li>功能：将node2节点插入到node1节点子节点的末尾</li>
<li>格式：node1.appendChild(node2);</li>
</ul>
</li>
<li>createTextNode()<ul>
<li>功能：创建文本节点(纯文本，写标签也不解析)</li>
<li>格式：document.createTextNode(文本)</li>
</ul>
</li>
<li>insertBefore()<ul>
<li>功能：将box2添加到box1前面</li>
<li>格式：box1.parentNode.insertBefore(box2,box1);<ul>
<li><strong>注意</strong>：必须用box1的父节点进行调用</li>
</ul>
</li>
</ul>
</li>
<li>replaceChild()<ul>
<li>功能：用box2节点将box1节点替换掉</li>
<li>格式：box1.parentNode.replaceChild(box2,box1);<ul>
<li><strong>注意</strong>：必须用box1的父节点进行调用</li>
</ul>
</li>
</ul>
</li>
<li>cloneNode()<ul>
<li>功能：克隆node节点，子节点和行间内容不克隆</li>
<li>格式：node.cloneNode();</li>
<li>功能2：克隆node节点，子节点和行间内容也克隆</li>
<li>格式：node.cloneNode(true);</li>
<li>返回值：克隆出来的新节点</li>
</ul>
</li>
<li>removeChild()<ul>
<li>功能：删除box节点</li>
<li>格式：(box.parentNode).removeChild(box)<ul>
<li>注意：必须用box的父节点进行调用</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="7-this关键字"><a href="#7-this关键字" class="headerlink" title="7. this关键字"></a>7. this关键字</h3><ul>
<li><p>概念：只要封装函数，任何一个函数系统都会内置一个叫做this的变量，this变量存储的是地址，当前函数主人的地址。函数主人通过上下文判断。this类似于现实生活中，用到的“我”。</p>
</li>
<li><p>常用情况：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person=&#123;</span><br><span class="line">    <span class="attr">username</span>:<span class="string">&quot;钢铁侠&quot;</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="string">&quot;男&quot;</span>,</span><br><span class="line">    <span class="attr">show</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="comment">//函数主人为person</span></span><br><span class="line">        <span class="title function_">alert</span>(person.<span class="property">username</span>);</span><br><span class="line">        <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">username</span>);<span class="comment">//2个结果一样</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">show</span>();<span class="comment">//全局函数 函数主人默认为window</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">show</span>();</span><br></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">window.onload=function()&#123;</span><br><span class="line">    <span class="keyword">var</span> oBtn=dcument.getElementById(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">    <span class="comment">//给页面上btn1的一个对象添加了一个函数</span></span><br><span class="line">    <span class="comment">//函数主人为当前按钮 this指向oBtn</span></span><br><span class="line">    oBtn.onclick=function()&#123;</span><br><span class="line">        alert(<span class="built_in">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="8-offset方法"><a href="#8-offset方法" class="headerlink" title="8. offset方法"></a>8. offset方法</h3><ul>
<li>offsetWidth</li>
<li>offsetHeight<ul>
<li>获取元素宽高 不带px </li>
<li>boorder和padding计算在内</li>
</ul>
</li>
<li>offsetLeft</li>
<li>offsetTop<ul>
<li>获取眼睛能看到的实际距离第一个有定位的父节点的距离。</li>
<li>不带px margin计算在内</li>
</ul>
</li>
</ul>
<h4 id="8-1-获取元素相对于视口的位置"><a href="#8-1-获取元素相对于视口的位置" class="headerlink" title="8.1. 获取元素相对于视口的位置"></a>8.1. 获取元素相对于视口的位置</h4><ul>
<li>getBoundingClientRect()<ul>
<li>getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。</li>
</ul>
</li>
<li>返回值：<ul>
<li>div.getBoundingClientRect().top：名为div元素上边到视窗上边的距离;</li>
<li>div.getBoundingClientRect().right：名为div元素右边到视窗左边的距离;</li>
<li>div.getBoundingClientRect().bottom：名为div元素下边到视窗上边的距离;</li>
<li>div.getBoundingClientRect().left：名为div元素左边到视窗左边的距离;</li>
</ul>
</li>
</ul>
<h3 id="9-文档碎片"><a href="#9-文档碎片" class="headerlink" title="9. 文档碎片"></a>9. 文档碎片</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	1.创建10w个节点，添加到页面上</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">time</span>(<span class="string">&quot;test1&quot;</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">100000</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">var</span> newDiv=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">timeEnd</span>(<span class="string">&quot;test1&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	2.创建10w个节点，将10w节点插入到一个节点上，最后将这一个节点添加到页面上</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">time</span>(<span class="string">&quot;test2&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> node=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">100000</span>;i++)&#123;</span><br><span class="line">    <span class="keyword">var</span> newDiv=<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">    node.<span class="title function_">appendChild</span>(newDiv);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(node);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">timeEnd</span>(<span class="string">&quot;test2&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">第一种方式耗时120毫秒 第二种耗时78毫秒</span></span><br><span class="line"><span class="comment">而第二种方式就是 文档碎片操作（效率高）</span></span><br><span class="line"><span class="comment">生活中的例子：</span></span><br><span class="line"><span class="comment">1.想吃干脆面，下楼买一趟，想喝可乐，再下楼一趟，想吃方便面，再下楼一趟。</span></span><br><span class="line"><span class="comment">2.一趟把东西买完。</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="10-数组和对象的遍历方法"><a href="#10-数组和对象的遍历方法" class="headerlink" title="10. 数组和对象的遍历方法"></a>10. 数组和对象的遍历方法</h3><p>数组遍历：</p>
<ul>
<li><p>for循环</p>
</li>
<li><p>for…in快速遍历 (效率高无判断</p>
</li>
<li><p>forEach</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>]</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">	<span class="variable language_">document</span>.<span class="title function_">write</span>(i+<span class="string">&quot;,&quot;</span>+arr[i]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> arr)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(i+<span class="string">&quot;,&quot;</span>+arr[i]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(indexi+<span class="string">&quot;,&quot;</span>+item);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
</ul>
<p>对象遍历:</p>
<ul>
<li><p>for…in</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person=&#123;</span><br><span class="line">    <span class="attr">username</span>:<span class="string">&quot;钢铁侠&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="string">&quot;男&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> person)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;属性名:&quot;</span>+i+<span class="string">&quot;属性值:&quot;</span>+person[i])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="九-JavaScript-事件"><a href="#九-JavaScript-事件" class="headerlink" title="九. JavaScript-事件"></a>九. JavaScript-事件</h2><h3 id="1-事件和事件类型"><a href="#1-事件和事件类型" class="headerlink" title="1.事件和事件类型"></a>1.事件和事件类型</h3><h4 id="1-1-什么是事件："><a href="#1-1-什么是事件：" class="headerlink" title="1.1. 什么是事件："></a>1.1. 什么是事件：</h4><ul>
<li>事件是发生并得到处理的操作，即事情来了，然后处理，例如：<ul>
<li>电话铃响起（事件发生），接电话（处理）</li>
<li>同学举手（事件发生），解答（处理）</li>
<li>按钮被点击（事件发生），对应一个函数来处理（处理）</li>
</ul>
</li>
</ul>
<h4 id="1-2-事件绑定方式"><a href="#1-2-事件绑定方式" class="headerlink" title="1.2. 事件绑定方式"></a>1.2. 事件绑定方式</h4><ul>
<li><p>JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。</p>
</li>
<li><p>JavaScript有两种事件模型：内联模型、外联&#x2F;脚本模型。</p>
</li>
<li><p>内联模型：</p>
<ul>
<li><p>这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多</p>
</li>
<li><pre><code class="html">&lt;button onclick=&#39;btn();&#39;&gt; &lt;/button&gt;
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 外联模型：</span><br><span class="line"></span><br><span class="line">  - ```javascript</span><br><span class="line">    var btn=document.getElementById(&quot;btn1&quot;);</span><br><span class="line">    btn.onclick=function()&#123;</span><br><span class="line">        alert(&quot;外连模式&quot;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
</code></pre>
</li>
<li><p>绑定格式：</p>
<ul>
<li><strong>元素节点.on+事件类型&#x3D;匿名函数。</strong></li>
<li>click      事件类型</li>
<li>onclick 事件处理的函数</li>
</ul>
</li>
</ul>
</li>
<li><p>实际开发中我们希望js代码和html css是分离的 所以推荐使用外联模型。</p>
</li>
</ul>
<h4 id="1-3-事件类型的种类"><a href="#1-3-事件类型的种类" class="headerlink" title="1.3. 事件类型的种类"></a>1.3. 事件类型的种类</h4><p>一、鼠标事件(可以绑定在任何元素节点上)</p>
<table>
<thead>
<tr>
<th>事件名</th>
<th>事件详情</th>
</tr>
</thead>
<tbody><tr>
<td>click</td>
<td>单击</td>
</tr>
<tr>
<td>dblclick</td>
<td>双击</td>
</tr>
<tr>
<td>mouseover</td>
<td>鼠标移入</td>
</tr>
<tr>
<td>mouseout</td>
<td>鼠标移出</td>
</tr>
<tr>
<td>mousemove</td>
<td>鼠标移动（不停触发</td>
</tr>
<tr>
<td>mouseenter</td>
<td>鼠标移入</td>
</tr>
<tr>
<td>mouseleave</td>
<td>鼠标移出</td>
</tr>
</tbody></table>
<ul>
<li><p>mouserleave和mouseout的区别</p>
</li>
<li><p>mouseleave是当鼠标指针离开了目标元素以及目标元素的所有子元素以后才会触发。</p>
<p>而mouseout是只要鼠标指针离开了目标元素或者目标元素的所有子元素中的任何一个就会被触发，即使鼠标指针还在目标元素内。也就是离开子元素后，mouseout事件会冒泡到父元素上。直到取消了冒泡或者到达了最外层根元素，才会停止冒泡。</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout">https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout</a></p>
</li>
<li><p>mouseenter与mouseove同理</p>
<ul>
<li>mouseenter经过子节点不会重复触发</li>
<li>mouserover经过子节点会重复触发</li>
</ul>
</li>
</ul>
<p>二、键盘事件（表单元素、全局window）</p>
<ul>
<li>keydown<ul>
<li>键盘按下（不放手 一直触发</li>
</ul>
</li>
<li>keyup<ul>
<li>键盘抬起</li>
</ul>
</li>
<li>keypress<ul>
<li>键盘按下（只支持字符键,例如数字，英文字符键）</li>
</ul>
</li>
</ul>
<p>三、HTML事件</p>
<ol>
<li>window事件</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">- load</span><br><span class="line">  </span><br><span class="line">  - 页面加载完以后触发</span><br><span class="line">- unload</span><br><span class="line">  </span><br><span class="line">  - 当页面解构的时候触发（刷新,关闭）仅兼容ie</span><br><span class="line">- scroll</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">- 页面滚动</span><br><span class="line">  - resize</span><br><span class="line">    - 窗口大小发生变化</span><br><span class="line">     	2. 表单事件</span><br><span class="line">  - blur</span><br><span class="line">    </span><br><span class="line">    - 失去焦点</span><br><span class="line">  - foucs</span><br><span class="line">    </span><br><span class="line">    - 获取焦点</span><br><span class="line">  - select</span><br><span class="line">    </span><br><span class="line">    - 当我们在输入框内选中文本的时候触发</span><br><span class="line">  - change</span><br><span class="line">    </span><br><span class="line">    - 当我们对输入框的文本进行修改并且失去焦点的时候</span><br><span class="line">  - 必须添加到form元素的事件</span><br><span class="line">    - submit</span><br><span class="line">      - 当我们点击submit的按钮才能触发</span><br><span class="line">    - reset</span><br><span class="line">      - 当我们点击reset的按钮才能触发</span><br></pre></td></tr></table></figure>

<h3 id="2-事件对象和事件对象属性"><a href="#2-事件对象和事件对象属性" class="headerlink" title="2. 事件对象和事件对象属性"></a>2. 事件对象和事件对象属性</h3><h4 id="2-1-事件对象"><a href="#2-1-事件对象" class="headerlink" title="2.1. 事件对象"></a>2.1. 事件对象</h4><ul>
<li><p>引例：番茄炒蛋 番茄+鸡蛋+条例炒出来的味道是全新的味道，不是番茄也不是鸡蛋的味道了</p>
</li>
<li><p>事件绑定：</p>
<ul>
<li>元素节点.on + 事件类型&#x3D;匿名函数；</li>
</ul>
</li>
<li><p>系统会在事件绑定完成的时候，生成一个事件对象，将事件对象当作第一个参数传入</p>
</li>
<li><p>触发事件的时候，系统会自动去调用事件绑定的函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="variable language_">arguments</span>.<span class="property">length</span>);<span class="comment">//1</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="variable language_">arguments</span>[<span class="number">0</span>]);<span class="comment">//object MouseEvent</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;hello world&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> btn=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">    btn.<span class="property">onclick</span>=show;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>可以设置一个形参，传入事件对象的时候可以通过形参拿到 ie8以下不兼容</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">ev</span>)&#123;</span><br><span class="line">    <span class="comment">//浏览器兼容</span></span><br><span class="line">	<span class="keyword">var</span> ev = ev || <span class="variable language_">window</span>.<span class="property">event</span></span><br><span class="line">    </span><br><span class="line">	<span class="title function_">alert</span>(<span class="variable language_">arguments</span>.<span class="property">length</span>);<span class="comment">//1</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="variable language_">arguments</span>[<span class="number">0</span>]);<span class="comment">//object MouseEvent</span></span><br><span class="line">    <span class="title function_">alert</span>(ev)<span class="comment">//object MouseEvent </span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;hello world&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> btn=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">    btn.<span class="property">onclick</span>=show;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>最终写法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> btn=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">    btn.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">ev</span>)&#123;</span><br><span class="line">        <span class="comment">//事件对象获取,固定写法</span></span><br><span class="line">        <span class="keyword">var</span> ev=ev||<span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="title function_">alert</span>(e);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="2-2-事件对象属性"><a href="#2-2-事件对象属性" class="headerlink" title="2.2. 事件对象属性"></a>2.2. 事件对象属性</h4><ul>
<li>button属性<ul>
<li>0 按下鼠标左键</li>
<li>1 滚轮</li>
<li>2 右键</li>
</ul>
</li>
</ul>
<p>获取当前鼠标位置：区别（原点位置不同）</p>
<ul>
<li>clientX   clientY<ul>
<li>可视窗口的左上角为原点</li>
</ul>
</li>
<li>pageX    pageY<ul>
<li>整个页面的左上角(包含滚动出去的距离)</li>
</ul>
</li>
<li>screenX screenY<ul>
<li>电脑屏幕的左上角</li>
</ul>
</li>
</ul>
<p>获取功能键：</p>
<ul>
<li>shiftKey<ul>
<li>按下shift键，为true，默认为false</li>
</ul>
</li>
<li>altKey<ul>
<li>按下alt键，为true，默认为false</li>
</ul>
</li>
<li>ctrlKey<ul>
<li>按下ctrl键，为true，默认为false</li>
</ul>
</li>
<li>metaKey<ul>
<li>windows系统 按下windows（开始）键，为true</li>
<li>macos系统 按下command键，为true</li>
</ul>
</li>
<li>可以和别的操作进行组合，形成一些快捷键操作。</li>
</ul>
<p>获取键码</p>
<ul>
<li>keyCode (兼容ie) 和 which    <ul>
<li>格式：var which &#x3D; e.which || e.keyCode;</li>
<li>返回值：大写字母的ASCII码值。不区分大小写。</li>
<li>只在keydown下支持</li>
</ul>
</li>
</ul>
<p>获取字符码</p>
<ul>
<li>charCode (兼容ie) 和 which<ul>
<li>格式：var which &#x3D; e.which || e.charCode;</li>
<li>返回值：区分大小写的ASCII码值。</li>
<li>只在keypress下支持，只支持字符键。</li>
</ul>
</li>
</ul>
<h3 id="3-目标对象和事件冒泡"><a href="#3-目标对象和事件冒泡" class="headerlink" title="3. 目标对象和事件冒泡"></a>3. 目标对象和事件冒泡</h3><h4 id="3-1-目标对象target"><a href="#3-1-目标对象target" class="headerlink" title="3.1. 目标对象target"></a>3.1. 目标对象target</h4><ul>
<li><p>概念：是事件对象的属性，代表触发对象</p>
<ul>
<li>触发对象：事件由谁而起的</li>
</ul>
</li>
<li><p>兼容IE8：window.event.srcElement;</p>
</li>
<li><p>例子：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> li=doucment.<span class="title function_">getElementById</span>(<span class="string">&quot;li1&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">ev</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> e=ev||<span class="variable language_">window</span>.<span class="property">event</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> target = e.<span class="property">target</span>||<span class="variable language_">window</span>.<span class="property">event</span>.<span class="property">srcElement</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(target.<span class="property">innerHTML</span>);<span class="comment">//1111</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> ul=doucment.<span class="title function_">getElementById</span>(<span class="string">&quot;ul1&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    li.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">ev</span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> e=ev||<span class="variable language_">window</span>.<span class="property">event</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> target = e.<span class="property">target</span>||<span class="variable language_">window</span>.<span class="property">event</span>.<span class="property">srcElement</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//点击内容2222的li</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">tagName</span>);<span class="comment">//ul  this指向函数主人ul</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(target.<span class="property">innerHTML</span>);<span class="comment">//2222 由li而起的</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//就好像隔了一层纸打了你一下，然后你叫了一声，但是我打的是纸，触发对象是纸，疼的是你。</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&#x27;ul1&#x27;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">&#x27;li1&#x27;</span>&gt;</span>1111<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2222<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="3-2-事件冒泡与捕获"><a href="#3-2-事件冒泡与捕获" class="headerlink" title="3.2. 事件冒泡与捕获"></a>3.2. 事件冒泡与捕获</h4><ul>
<li><p>冒泡：一个页面中的多个dom如果呈现父子类关系，并且都绑定了事件，则会有事件冒泡的情况发生，从最里面的dom冒泡到外层，<strong>由里向外逐级触发</strong>。</p>
</li>
<li><p>捕获：冒泡反过来，由外向里逐级触发</p>
</li>
<li><p>阻止事件冒泡：</p>
<ul>
<li>event.stopPropagation()</li>
<li>event.cancelBubble&#x3D;true;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">stopbUBBLE</span>(<span class="params">e</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(e.<span class="property">stopPropagation</span>)&#123;</span><br><span class="line">        e.<span class="title function_">stopPropagation</span>();</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        e.<span class="property">cancelBubble</span>=<span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="4-阻止默认行为"><a href="#4-阻止默认行为" class="headerlink" title="4.阻止默认行为"></a>4.阻止默认行为</h3><p>1.阻止官方右键菜单</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">//关闭官方右键菜单</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">oncontextmenu</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>2.阻止超链接跳转</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">link.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">evt</span>)&#123;</span><br><span class="line">    evt.<span class="title function_">preventDefault</span>();<span class="comment">//W3C，阻止默认行为，放哪里都可以</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line">link.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">ev</span>)&#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">event</span>.<span class="property">returnValue</span>=<span class="literal">false</span>;<span class="comment">//IE，阻止默认行为</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&#x27;1&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//兼容写法</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">preDef</span>(<span class="params">e</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (e.<span class="property">preventDefault</span>) &#123;</span><br><span class="line">        e.<span class="title function_">preventDefault</span>();</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">event</span>.<span class="property">returnValue</span>=<span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>案例：自定义右键菜单，跳转链接阻止加操作</p>
<h3 id="5-实现拖拽使用到的事件"><a href="#5-实现拖拽使用到的事件" class="headerlink" title="5.实现拖拽使用到的事件"></a>5.实现拖拽使用到的事件</h3><p>拖拽：</p>
<ul>
<li>mousedown<ul>
<li>记录鼠标按下位置和被拖拽物体相对距离</li>
</ul>
</li>
<li>mousemove<ul>
<li>一直保持相对距离</li>
</ul>
</li>
<li>mouseup<ul>
<li>取消拖拽</li>
</ul>
</li>
</ul>
<h3 id="6-事件委托"><a href="#6-事件委托" class="headerlink" title="6. 事件委托"></a>6. 事件委托</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> ul=<span class="variable language_">document</span>.<span class="title function_">getElementByid</span>(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> li=docuemnt.<span class="title function_">getElementByTagName</span>(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//添加点击事件</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;li.<span class="property">length</span>;i++)&#123;</span><br><span class="line">        li[i].<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">style</span>.<span class="property">backgroundColor</span>=<span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    	这种添加方法</span></span><br><span class="line"><span class="comment">    	 - 1.浪费</span></span><br><span class="line"><span class="comment">    	 - 2.如果新增节点是没有事件的</span></span><br><span class="line"><span class="comment">    	相当于5个人想喝水一个人带一个水龙头(函数) 谁要喝就拧上去，喝完把水龙头拧下来。而且新来的同学不知道规矩没有水龙头(惨)</span></span><br><span class="line"><span class="comment">    	</span></span><br><span class="line"><span class="comment">    	解决这种情况的方式就叫事件委托</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	委托：</span></span><br><span class="line"><span class="comment">		A委托B去买饭。</span></span><br><span class="line"><span class="comment">		A发布任务 委托方</span></span><br><span class="line"><span class="comment">		B执行任务 受理方</span></span><br><span class="line"><span class="comment">		A要吃饭 B去买饭 </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	事件委托步骤：</span></span><br><span class="line"><span class="comment">	 - 1.找到当前节点的父节点或者祖先节点</span></span><br><span class="line"><span class="comment">	 - 2.将事件添加到你找的父节点或者祖先节点上</span></span><br><span class="line"><span class="comment">	 - 3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    	li要变红</span></span><br><span class="line"><span class="comment">    	li委托ul去做</span></span><br><span class="line"><span class="comment">    	li变红</span></span><br><span class="line"><span class="comment">    	</span></span><br><span class="line"><span class="comment">    	li要吃饭</span></span><br><span class="line"><span class="comment">    	ul去买饭</span></span><br><span class="line"><span class="comment">    	li吃到饭</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="keyword">var</span> ul=<span class="variable language_">document</span>.<span class="title function_">getElementByid</span>(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">    </span><br><span class="line">    ul.<span class="property">onclickk</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">var</span> e=ev||<span class="variable language_">window</span>.<span class="property">event</span>;</span><br><span class="line">        <span class="keyword">var</span> target=e.<span class="property">target</span>||<span class="variable language_">window</span>.<span class="property">event</span>.<span class="property">srcElement</span>;</span><br><span class="line">        <span class="keyword">if</span>(target.<span class="property">nodeName</span>.<span class="title function_">toLowerCase</span>()==<span class="string">&quot;li&quot;</span>)&#123;</span><br><span class="line">            target.<span class="property">style</span>.<span class="property">backgroundColor</span>=<span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//所有li的变红都由ul的一个点击函数实现 1.不浪费 2.新增li也可以添加到效果,相当于5个同学 用一个水龙头(函数)。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="7-事件监听器"><a href="#7-事件监听器" class="headerlink" title="7. 事件监听器"></a>7. 事件监听器</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//传统事件绑定格式</span></span><br><span class="line"><span class="keyword">var</span> btn=docuement.<span class="title function_">getElementById</span>(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">btn.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;点击1&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line">btn.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;点击2&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	缺点:</span></span><br><span class="line"><span class="comment">	 - 1.重复添加覆盖</span></span><br><span class="line"><span class="comment">	 	- 因为是赋值，覆盖，点击后输出点击2</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	事件监听器：</span></span><br><span class="line"><span class="comment">	 - 事件绑定的另一种方式</span></span><br><span class="line"><span class="comment">	 - addEventListener()</span></span><br><span class="line"><span class="comment">	  - 格式：node.addEventListener(“click”)</span></span><br><span class="line"><span class="comment">	  - 参数：</span></span><br><span class="line"><span class="comment">	   - 1.事件类型</span></span><br><span class="line"><span class="comment">	   - 2.绑定函数</span></span><br><span class="line"><span class="comment">	   - 3.布尔值 true:捕获 false:冒泡（默认</span></span><br><span class="line"><span class="comment">	 - removeEventListener()</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//事件监听器绑定格式</span></span><br><span class="line"><span class="keyword">var</span> btn=docuement.<span class="title function_">getElementById</span>(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;点击1&quot;</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;点击2&quot;</span>);</span><br><span class="line">&#125;,<span class="literal">false</span>);</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	优点：</span></span><br><span class="line"><span class="comment">		1.不会覆盖</span></span><br><span class="line"><span class="comment">		2.可精确删除某个函数</span></span><br><span class="line"><span class="comment">	适用情况：</span></span><br><span class="line"><span class="comment">		- 给一个控件添加多个函数</span></span><br><span class="line"><span class="comment">		- 精确删除某一个函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//点击后输出点击1然后输出点击2</span></span><br><span class="line"><span class="comment">//应用情况：写了好多代码 想加功能 不用回去找</span></span><br></pre></td></tr></table></figure>

<h4 id="事件监听器兼容"><a href="#事件监听器兼容" class="headerlink" title="事件监听器兼容"></a>事件监听器兼容</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">addEvent</span>(<span class="params">node,evenType,funcName</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(node.<span class="property">addEventListener</span>)&#123;</span><br><span class="line">		node.<span class="title function_">addEventListener</span>(evenType,funcName,<span class="literal">false</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        node.<span class="title function_">attachEvent</span>(<span class="string">&quot;on&quot;</span>+evenType,funcName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">removeEvent</span>(<span class="params">node,evenType,funcName</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(node.<span class="property">removeEventListener</span>)&#123;</span><br><span class="line">        node.<span class="title function_">removeEventListener</span>(eventType,funcName);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        node.<span class="title function_">detachEvent</span>(<span class="string">&quot;on&quot;</span>+eventType,funcName);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>案例：生成表格，放大镜</p>
<h3 id="十-JavaScript-正则表达式"><a href="#十-JavaScript-正则表达式" class="headerlink" title="十. JavaScript-正则表达式"></a>十. JavaScript-正则表达式</h3><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1. 概念"></a>1. 概念</h3><ul>
<li>用途<ul>
<li>假设用户需要在HTML表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理之前，JavaScript程序会检查表单确认用户确实输入了信息并且这些信息是符合要求的。</li>
</ul>
</li>
<li>概念：<ul>
<li>正则表达式（regular expression）是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而String和正则表达式都定义了进行强大的<strong>模式匹配</strong>和<strong>文本检索</strong>与<strong>替换</strong>的函数</li>
</ul>
</li>
</ul>
<h3 id="2-创建正则表达式"><a href="#2-创建正则表达式" class="headerlink" title="2. 创建正则表达式"></a>2. 创建正则表达式</h3><ol>
<li><p>通过new去声明正则表达式</p>
<ul>
<li>参数1：正则表达式主体（字符串</li>
<li>参数2：修饰符 i&#x2F;g</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box1=<span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">&quot;hello&quot;</span>,<span class="string">&quot;ig&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(box1) <span class="comment">// 	/hello/gi</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>省略new运算符声明正则表达式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box1=<span class="title class_">RegExp</span>(<span class="string">&quot;hello&quot;</span>,<span class="string">&quot;ig&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(box1) <span class="comment">// 	/hello/gi</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>通过常量赋值声明正则表达式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box1=<span class="regexp">/hello/gi</span>;</span><br><span class="line"><span class="title function_">alert</span>(box1) <span class="comment">// 	/hello/gi</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="3-正则表达式方法"><a href="#3-正则表达式方法" class="headerlink" title="3. 正则表达式方法"></a>3. 正则表达式方法</h3><ul>
<li>test<ul>
<li>格式：正则.test(字符串)</li>
<li>功能：在字符串中匹配这个正则是否存在</li>
<li>返回值：成功返回true，失败返回false</li>
</ul>
</li>
<li>exec<ul>
<li>格式：正则.exec(字符串)</li>
<li>功能：在字符串中匹配这个正则是否存在</li>
<li>返回值：返回匹配到的字符串，成功返回数组，失败返回null</li>
</ul>
</li>
</ul>
<h3 id="4-可使用正则表达式的字符串方法"><a href="#4-可使用正则表达式的字符串方法" class="headerlink" title="4.可使用正则表达式的字符串方法"></a>4.可使用正则表达式的字符串方法</h3><ul>
<li><p>match()</p>
<ul>
<li>格式：字符串.match(正则);</li>
<li>功能：字符串中匹配是否有符合的字符串</li>
<li>返回值：成功返回装有匹配到字符串的数组，失败返回null</li>
</ul>
</li>
<li><p>replace()</p>
<ul>
<li><p>格式：字符串.replace(旧字符串&#x2F;正则,新字符串);</p>
</li>
<li><p>功能：新替换旧</p>
</li>
<li><p>返回值：替换成功的新字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;how are Are ARE you&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr=str.<span class="title function_">replace</span>(<span class="regexp">/are/ig</span>,<span class="string">&quot;*&quot;</span>);</span><br><span class="line"><span class="title function_">alert</span>(newStr) <span class="comment">// how * * * you</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>split()</p>
<ul>
<li><p>格式：字符串.replace(分隔符&#x2F;正则);</p>
</li>
<li><p>功能：用分隔符将原字符串进行分割</p>
</li>
<li><p>返回值：分割剩下的子串组成的数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;how are Are ARE you&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr=str.<span class="title function_">split</span>(<span class="regexp">/are/i</span>);</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//how,,,you</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>search()</p>
<ul>
<li><p>格式：字符串.search(字符串&#x2F;正则);</p>
</li>
<li><p>功能：找到符合字符串第一次出现位置</p>
</li>
<li><p>返回值：找到返回&gt;&#x3D;0下标，否则返回-1</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str=<span class="string">&quot;how Are are ARE you&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr=str.<span class="title function_">search</span>(<span class="regexp">/are/i</span>);</span><br><span class="line"><span class="title function_">alert</span>(arr);<span class="comment">//4</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="5-元字符"><a href="#5-元字符" class="headerlink" title="5.元字符"></a>5.元字符</h3><ul>
<li>概念：在正则表达式中有特殊含义的字符串</li>
</ul>
<h4 id="5-1-常用元字符"><a href="#5-1-常用元字符" class="headerlink" title="5.1. 常用元字符"></a>5.1. 常用元字符</h4><table>
<thead>
<tr>
<th>元字符</th>
<th>匹配情况</th>
</tr>
</thead>
<tbody><tr>
<td>.</td>
<td>匹配除换行符外任意单个字符</td>
</tr>
<tr>
<td>[a-z0-9]</td>
<td>匹配括号中字符集任意字符</td>
</tr>
<tr>
<td>[^a-z0-9]</td>
<td>匹配不在括号中字符集的字符</td>
</tr>
<tr>
<td>\d</td>
<td>匹配数字</td>
</tr>
<tr>
<td>\D</td>
<td>匹配非数字同[ ^0-9]相同</td>
</tr>
<tr>
<td>\w</td>
<td>匹配字母数字下划线</td>
</tr>
<tr>
<td>\W</td>
<td>匹配非字母数字下划线</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>元字符</th>
<th>匹配情况</th>
</tr>
</thead>
<tbody><tr>
<td>x?</td>
<td>匹配0或1个x</td>
</tr>
<tr>
<td>x*</td>
<td>匹配0或任意多个x</td>
</tr>
<tr>
<td>x+</td>
<td>匹配至少一个x</td>
</tr>
<tr>
<td>(xyz)+</td>
<td>匹配至少一个xyz</td>
</tr>
<tr>
<td>x{m,n}</td>
<td>匹配最少m个、最多n个x</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>元字符</th>
<th>匹配情况</th>
</tr>
</thead>
<tbody><tr>
<td>\s</td>
<td>匹配空白字符、空格、制表符和换行符</td>
</tr>
<tr>
<td>\S</td>
<td>匹配非空白字符</td>
</tr>
<tr>
<td>\0</td>
<td>匹配null字符</td>
</tr>
<tr>
<td>\b</td>
<td>匹配空格字符</td>
</tr>
<tr>
<td>\f</td>
<td>匹配换页符</td>
</tr>
<tr>
<td>\n</td>
<td>匹配换行字符</td>
</tr>
<tr>
<td>\r</td>
<td>匹配回车字符</td>
</tr>
<tr>
<td>\t</td>
<td>匹配制表符</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>元字符</th>
<th>匹配情况</th>
</tr>
</thead>
<tbody><tr>
<td>^</td>
<td>必须以这个正则开头</td>
</tr>
<tr>
<td>$</td>
<td>必须以这个正则结尾</td>
</tr>
<tr>
<td>|</td>
<td>两项之间的一个选择</td>
</tr>
</tbody></table>
<ul>
<li>案例：输入框密码框验证</li>
</ul>
<h2 id="十一-localStorage"><a href="#十一-localStorage" class="headerlink" title="十一. localStorage"></a>十一. localStorage</h2><h3 id="1-什么是localStorage"><a href="#1-什么是localStorage" class="headerlink" title="1.什么是localStorage"></a>1.什么是localStorage</h3><p>​	loacalStorage本地存储对象	</p>
<p>​	在HTML5中，新加入了一个loaclStorage特性，这个特性作为本地存储使用，解决了cookie存储空间不足问题（每条cookie的存储空间为4k），localStorage中一般浏览器支持的是5M大小，这个在不同浏览器中localStoarage会有所不同。</p>
<h3 id="2-localStorage优势与局限"><a href="#2-localStorage优势与局限" class="headerlink" title="2.localStorage优势与局限"></a>2.localStorage优势与局限</h3><ul>
<li>localStorage的优势<ul>
<li>localStorage拓展了cookie的4K限制</li>
<li>localStorage可以将第一次请求的数据直接存储到本地，相当于5M大小针对前端页面的数据库，相比cookie可以节约带宽，高版本浏览器才支持</li>
</ul>
</li>
<li>localStorage的局限<ul>
<li>浏览器大小不统一，ie8以上才支持</li>
<li>值类型为string，相比常见的JSON对象类型需要转换</li>
<li>在浏览器隐私模式下不可读取</li>
<li>本质是对字符串读取，存储内容多会消耗内存空间，导致页面变卡</li>
<li>不能被爬虫抓取到</li>
<li>永久性存储</li>
</ul>
</li>
</ul>
<h3 id="3-cookie"><a href="#3-cookie" class="headerlink" title="3.cookie"></a>3.cookie</h3><ol>
<li>可以设置过期时间</li>
<li>最大可以存4KB</li>
<li>每一个域名下最多可以存储50条数据</li>
</ol>
<h3 id="4-sessionStorage"><a href="#4-sessionStorage" class="headerlink" title="4.sessionStorage"></a>4.sessionStorage</h3><ul>
<li>结合后端</li>
<li>保留一次对话</li>
</ul>
<h3 id="5-localStorage方法"><a href="#5-localStorage方法" class="headerlink" title="5.localStorage方法"></a>5.localStorage方法</h3><ul>
<li><p>setItem(name,value);</p>
</li>
<li><p>getItem(name);</p>
</li>
<li><p>removeItem(name);</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(!<span class="variable language_">window</span>.<span class="property">localStorage</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;当前页面不支持localStorage&quot;</span>)</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">//设置</span></span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&quot;a&quot;</span>,<span class="string">&quot;1&quot;</span>);</span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="property">b</span>=<span class="string">&#x27;2&#x27;</span>;</span><br><span class="line">    <span class="variable language_">localStorage</span>[<span class="string">&quot;c&quot;</span>]=<span class="string">&#x27;3&#x27;</span>;</span><br><span class="line">    <span class="comment">//获取</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;b&quot;</span>));</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>.<span class="property">c</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>[<span class="string">&#x27;a&#x27;</span>]);</span><br><span class="line">	<span class="comment">//删除</span></span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">removeItem</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="十二-强制改变this指向函数"><a href="#十二-强制改变this指向函数" class="headerlink" title="十二. 强制改变this指向函数"></a>十二. 强制改变this指向函数</h2><ul>
<li><p>this回顾</p>
<ul>
<li><p>每一个函数的内置变量 指向当前函数主人</p>
</li>
<li><p>全局函数this指向window对象</p>
</li>
<li><p>对象内的函数的this指向对应名称对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person=&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;123&quot;</span>;</span><br><span class="line">    <span class="attr">show</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span>;<span class="comment">//this指向person</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>绑定事件的函数中的this指向绑定函数的对象</p>
</li>
</ul>
</li>
<li><p>call()</p>
<ul>
<li>格式：函数名.call();</li>
<li>参数1：传入改函数this指向的对象，传入什么强制指向什么</li>
<li>参数2：将原函数的参数往后顺延一位。</li>
</ul>
</li>
<li><p>apply()</p>
<ul>
<li><p>格式：函数名.apply();</p>
</li>
<li><p>参数1：传入改函数this指向的对象，传入什么强制指向什么</p>
</li>
<li><p>参数2：数组，放入我们原有所有参数</p>
</li>
<li><p>apply()应用小技巧</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Math</span>.<span class="property">min</span>.<span class="title function_">apply</span>(<span class="literal">null</span>,arr))</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>bind() 预设this指向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">x,y</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="variable language_">this</span>);</span><br><span class="line">    <span class="title function_">alert</span>(x+<span class="string">&quot;,&quot;</span>+y);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> res=show.<span class="title function_">bind</span>(<span class="string">&quot;bind&quot;</span>);<span class="comment">//不调用</span></span><br><span class="line"><span class="title function_">res</span>(<span class="number">40</span>,<span class="number">50</span>);<span class="comment">//bing 40,50</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>三者区别点：</p>
<ol>
<li>call和apply会调用函数，并改变函数内部this指向</li>
<li>call和apply传递的参数不一样，call传递参数aru1，aru2…形式，apply必须数组形式[arg]</li>
<li>bind不会调用函数，可以改变函数内部this指向。</li>
</ol>
</li>
<li><p>主要应用场景：</p>
<ol>
<li>call常做继承</li>
<li>apply经常跟数组有关系，比如借助math对象实现数组最大值最小值</li>
<li>bind不调用函数，但想改变this指向，比如改变定时器内部的this指向</li>
</ol>
</li>
</ul>
<h2 id="十三-let和const关键字"><a href="#十三-let和const关键字" class="headerlink" title="十三. let和const关键字"></a>十三. let和const关键字</h2><h3 id="1-let关键字"><a href="#1-let关键字" class="headerlink" title="1. let关键字"></a>1. let关键字</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类似var 但是所声明的变量，只在let命令所在的代码块内有效。</span></span><br><span class="line"><span class="comment">//不存在变量提升</span></span><br><span class="line"><span class="comment">//暂时性死区 只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。</span></span><br><span class="line"><span class="comment">//不允许重复声明</span></span><br><span class="line"><span class="comment">//应用在循环中每次不同循环会生成不同作用域</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">let</span> a=<span class="number">10</span>;</span><br><span class="line">    <span class="keyword">let</span> b=<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">alert</span>(a);<span class="comment">//报错</span></span><br><span class="line"><span class="title function_">alert</span>(b);</span><br></pre></td></tr></table></figure>

<h3 id="2-const关键字"><a href="#2-const关键字" class="headerlink" title="2. const关键字"></a>2. const关键字</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	变量值只能在声明时确定 后续无法修改</span></span><br><span class="line"><span class="comment">	相当于常量</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> <span class="variable constant_">IP</span>=<span class="string">&quot;10.30.152.33&quot;</span>;</span><br><span class="line"><span class="comment">//避免中途被修改</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">IP</span>=<span class="string">&quot;10.30.152.33&quot;</span>;</span><br></pre></td></tr></table></figure>

<h2 id="十四-箭头函数"><a href="#十四-箭头函数" class="headerlink" title="十四. 箭头函数"></a>十四. 箭头函数</h2><ul>
<li>箭头函数：另一种函数写法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> x+<span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">add</span>=x =&gt; x+<span class="number">10</span>;</span><br><span class="line"><span class="comment">//适当省略 函数中的function和return关键字。除了形式不一样其他完全一样。不推荐使用，可读性差</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//1.无参数，无返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;1&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">show</span>=(<span class="params"></span>) =&gt; &#123;<span class="title function_">alert</span>(<span class="string">&quot;1&quot;</span>)&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.有一个参数，无返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">xxx</span>(<span class="params">num</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(num);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">xxx</span>=num =&gt;&#123;<span class="title function_">alert</span>(num);&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.有一个参数，有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> x+<span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">add</span>=x =&gt; x+<span class="number">10</span>;</span><br><span class="line"><span class="comment">//==================</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="comment">//代码</span></span><br><span class="line">    <span class="keyword">return</span> x+<span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">add</span>=x =&gt; &#123;</span><br><span class="line">	<span class="comment">//代码    	</span></span><br><span class="line">    <span class="keyword">return</span> x+<span class="number">10</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//4.多个参数，有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">x,y</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">alert</span>(x+y);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title function_">show</span>=(<span class="params">x,y</span>)=&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">alert</span>(x+y);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>与数组方法结合使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//filter 过滤</span></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">item</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> item&gt;<span class="number">2</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="title function_">alert</span>(newArr);<span class="comment">//3,4,5,6</span></span><br><span class="line"><span class="comment">//转换成箭头函数</span></span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item&gt;<span class="number">2</span>);</span><br><span class="line"><span class="comment">//====================</span></span><br><span class="line"><span class="keyword">var</span> newArr=arr.<span class="title function_">map</span>(<span class="function"><span class="params">item</span>=&gt;</span>item*<span class="number">1.3</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：</p>
<ul>
<li>箭头函数不能用new</li>
<li>返回值是对象一定要加();</li>
<li>箭头函数中的this指向上一层函数主人,没有上一层指向window</li>
</ul>
</li>
</ul>
<h2 id="十五-解构和ECMA6字符串"><a href="#十五-解构和ECMA6字符串" class="headerlink" title="十五. 解构和ECMA6字符串"></a>十五. 解构和ECMA6字符串</h2><h3 id="1-解构"><a href="#1-解构" class="headerlink" title="1. 解构"></a>1. 解构</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x=<span class="number">10</span>,y=<span class="number">20</span>,z=<span class="number">30</span>;</span><br><span class="line"><span class="keyword">var</span> [x,y,z]=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>];</span><br><span class="line"><span class="keyword">var</span> [x,[y,z]]=[<span class="number">10</span>,[<span class="number">20</span>,<span class="number">30</span>]];</span><br><span class="line"><span class="comment">//上面3个效果一样</span></span><br><span class="line"><span class="keyword">var</span> name=<span class="string">&quot;钢铁侠&quot;</span>,age=<span class="number">18</span>,sex=<span class="string">&quot;男&quot;</span></span><br><span class="line"><span class="keyword">var</span> &#123;name,age,sex&#125;=&#123;</span><br><span class="line">    <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;钢铁侠&quot;</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="string">&quot;男&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//上面2个效果一样</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	好处：</span></span><br><span class="line"><span class="comment">		1.交换2个值</span></span><br><span class="line"><span class="comment">		2.函数可以返回多个值</span></span><br><span class="line"><span class="comment">		3.函数定义参数和传入参数顺序改变</span></span><br><span class="line"><span class="comment">			- 参数可以带默认值</span></span><br><span class="line"><span class="comment">		4.快速取出数组中某一元素</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//1</span></span><br><span class="line"><span class="keyword">var</span> [x,y]=[<span class="number">10</span>,<span class="number">20</span>];</span><br><span class="line">[x,y]=[y,x];</span><br><span class="line"><span class="comment">//2</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">xxx</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> [a,b,c]=<span class="title function_">xxx</span>();</span><br><span class="line"><span class="comment">//3</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">&#123;name,age=<span class="number">20</span>,sex&#125;</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;我叫&quot;</span>+name+<span class="string">&quot;今年&quot;</span>+age+<span class="string">&quot;,&quot;</span>+sex);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">show</span>(&#123;</span><br><span class="line">    <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">    <span class="attr">sex</span>:<span class="string">&quot;男&quot;</span>,</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;小明&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//4</span></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> &#123;<span class="number">0</span>:first,<span class="number">4</span>:last&#125;=arr;</span><br><span class="line"><span class="title function_">alert</span>(first);</span><br></pre></td></tr></table></figure>

<h3 id="2-ECMA6字符串"><a href="#2-ECMA6字符串" class="headerlink" title="2. ECMA6字符串"></a>2. ECMA6字符串</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	传统字符串：单引号双引号</span></span><br><span class="line"><span class="comment">	ECMA6字符串：反引号</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	ECMA6字符串新特性：</span></span><br><span class="line"><span class="comment">		1.回车和缩进保留</span></span><br><span class="line"><span class="comment">		2.$&#123;变量/表达式/函数调用&#125;字符串拼接</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//2</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">show</span>(<span class="params">&#123;name,age=<span class="number">20</span>,sex&#125;</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">`我叫<span class="subst">$&#123;name&#125;</span>,今年<span class="subst">$&#123;age&#125;</span>,+<span class="subst">$&#123;sex&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="十六-ECMA6新增数组方法和合并对象"><a href="#十六-ECMA6新增数组方法和合并对象" class="headerlink" title="十六.ECMA6新增数组方法和合并对象"></a>十六.ECMA6新增数组方法和合并对象</h2><h3 id="1-新增数组方法"><a href="#1-新增数组方法" class="headerlink" title="1. 新增数组方法"></a>1. 新增数组方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	Array.from() 伪数组转真数组</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	find()</span></span><br><span class="line"><span class="comment">	 - 功能：中查找符合条件的元素（短路操作</span></span><br><span class="line"><span class="comment">	 - 返回值；找到的元素</span></span><br><span class="line"><span class="comment">	 </span></span><br><span class="line"><span class="comment">	findIndex()</span></span><br><span class="line"><span class="comment">	 - 功能：中查找符合条件的元素（短路操作</span></span><br><span class="line"><span class="comment">	 - 返回值；找到的元素的下标</span></span><br><span class="line"><span class="comment">	 </span></span><br><span class="line"><span class="comment">	arr.copyWithin(target, start = 0, end = this.length)</span></span><br><span class="line"><span class="comment">	 - 功能：把某些个位置的元素复制并覆盖到其他位置上去</span></span><br><span class="line"><span class="comment">	 - target：目的起始位置。</span></span><br><span class="line"><span class="comment">	   start：复制源的起始位置，可以省略，可以是负数。</span></span><br><span class="line"><span class="comment">       end：复制源的结束位置，可以省略，可以是负数，实际结束位置是end-1。</span></span><br><span class="line"><span class="comment">  </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//find()</span></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">50</span>];</span><br><span class="line"><span class="keyword">var</span> res=arr.<span class="title function_">find</span>(<span class="keyword">function</span>(<span class="params">item,index,arr</span>)&#123;</span><br><span class="line">    <span class="comment">//查找条件</span></span><br><span class="line">    <span class="keyword">return</span> item&gt;<span class="number">20</span>;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//箭头函数写法</span></span><br><span class="line"><span class="keyword">var</span> res=arr.<span class="title function_">find</span>(<span class="function"><span class="params">item</span>=&gt;</span>item&gt;<span class="number">20</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//copyWithin</span></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span><br><span class="line">arr.<span class="title function_">copyWithin</span>(<span class="number">2</span>,<span class="number">4</span>,<span class="number">9</span>) <span class="comment">//1,2,5,6,7,8,9,8,9,10</span></span><br></pre></td></tr></table></figure>

<h3 id="2-合并对象"><a href="#2-合并对象" class="headerlink" title="2. 合并对象"></a>2. 合并对象</h3><ul>
<li>Object.assign</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1=&#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="number">30</span></span><br><span class="line">    	<span class="attr">b</span>:<span class="number">20</span>,</span><br><span class="line">    	<span class="attr">c</span>:<span class="number">30</span>,</span><br><span class="line">    	<span class="attr">d</span>:<span class="number">40</span>,</span><br><span class="line">    	<span class="attr">f</span>:<span class="string">&quot;地址&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj2=&#123;</span><br><span class="line">    <span class="attr">b</span>:<span class="number">20</span>,</span><br><span class="line">    <span class="attr">c</span>:<span class="number">30</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj3=&#123;</span><br><span class="line">    <span class="attr">d</span>:<span class="number">40</span>,</span><br><span class="line">    <span class="attr">f</span>:[<span class="string">&quot;hello&quot;</span>,<span class="string">&quot;world&quot;</span>,<span class="literal">true</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">assign</span>(obj1,obj2,obj3);<span class="comment">//从第二个参数开始，把后面的对象合并到第一个对象</span></span><br><span class="line"><span class="comment">//只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性</span></span><br><span class="line"><span class="comment">//浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。</span></span><br><span class="line"><span class="comment">//浅拷贝：拷贝地址 深拷贝：复合数据类型重新生成一份</span></span><br><span class="line"><span class="comment">//遇到同名属性处理方法为替换</span></span><br></pre></td></tr></table></figure>

<ul>
<li>应用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//为对象添加属性</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="十六-ECMA6集合"><a href="#十六-ECMA6集合" class="headerlink" title="十六.ECMA6集合"></a>十六.ECMA6集合</h2><ul>
<li><p>集合：</p>
<ul>
<li>不重复</li>
<li>无序</li>
</ul>
</li>
<li><p>Set</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> imgs=<span class="keyword">new</span> <span class="title class_">Set</span>();</span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="number">100</span>);</span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="number">100</span>);<span class="comment">//重复 添加不进去</span></span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="string">&quot;hello&quot;</span>);<span class="comment">//重复 添加不进去</span></span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="literal">true</span>);</span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&quot;world&quot;</span>));</span><br><span class="line">imgs.<span class="title function_">add</span>(<span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&quot;world&quot;</span>));<span class="comment">//每次新建一个 添加的进去</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	集合遍历</span></span><br><span class="line"><span class="comment">	for...of</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> imgs.<span class="title function_">keys</span>())&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> imgs.<span class="title function_">values</span>())&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> imgs.<span class="title function_">entries</span>())&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	利用集合去重</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> set=<span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">2</span>,<span class="number">3</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>]);</span><br><span class="line"><span class="keyword">var</span> arr=[...set];<span class="comment">//将数据结构展开成数组</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">1</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">3</span>];</span><br><span class="line">arr=[...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)];</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>Map映射</p>
<ul>
<li>键值不一致</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明</span></span><br><span class="line"><span class="keyword">let</span> map =<span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line"><span class="comment">//添加</span></span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&quot;张三&quot;</span>,<span class="string">&quot;打渔&quot;</span>);</span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&quot;李四&quot;</span>,<span class="string">&quot;种地&quot;</span>);</span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&quot;王五&quot;</span>,<span class="string">&quot;挖煤&quot;</span>);</span><br><span class="line"><span class="comment">//取值</span></span><br><span class="line"><span class="title function_">alert</span>(map.<span class="title function_">get</span>(<span class="string">&quot;王五&quot;</span>));</span><br><span class="line"><span class="comment">//遍历for of</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> [key,value] <span class="keyword">of</span> map)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(key,value);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="十七-数组遍历回顾与补充"><a href="#十七-数组遍历回顾与补充" class="headerlink" title="十七.数组遍历回顾与补充"></a>十七.数组遍历回顾与补充</h2><ul>
<li><p>数组</p>
<ul>
<li><p>for循环</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>,<span class="number">60</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(arr[i]+<span class="string">&quot;,&quot;</span>+i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>for…in</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> arr)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(arr[i]+<span class="string">&quot;,&quot;</span>+i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>foreach</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item,index</span>)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(item+<span class="string">&quot;,&quot;</span>+index);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>for…of</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> item <span class="keyword">of</span> arr)&#123;</span><br><span class="line">    <span class="comment">//item是当前遍历元素</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>对象</p>
<ul>
<li><p>for…in</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> attr <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="comment">//attr是obj对象的属性</span></span><br><span class="line">   <span class="variable language_">document</span>.<span class="title function_">write</span>(attr+<span class="string">&quot;,&quot;</span>+obj[attr]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>集合</p>
<ul>
<li>for …of</li>
</ul>
</li>
</ul>
<h2 id="十八-构造函数-封装"><a href="#十八-构造函数-封装" class="headerlink" title="十八.构造函数(封装)"></a>十八.构造函数(封装)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	prototype原型对象</span></span><br><span class="line"><span class="comment">	概念：每一个函数，都有一个原型对象prototype</span></span><br><span class="line"><span class="comment">		用在构造函数上，我们可以给构造函数的原型prototype，添加方法，构造出来的对象共享原型上所有方法</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//通过new调用函数：构造函数，可以构造对象</span></span><br><span class="line"><span class="comment">//构造函数首字母大写</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,sex</span>)&#123;</span><br><span class="line">    <span class="comment">//1.原料</span></span><br><span class="line">    <span class="comment">//var obj=new Object();</span></span><br><span class="line">    <span class="comment">//加new  this=new Object</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">//2.加工</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sex</span>=sex;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">showName</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;我的名字叫&quot;</span>+<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">showSex</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;我的性别是&quot;</span>+<span class="variable language_">this</span>.<span class="property">sex</span>+<span class="string">&quot;的&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//3.出厂</span></span><br><span class="line">    <span class="comment">//return obj;</span></span><br><span class="line">    <span class="comment">//加new return this;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1= <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;男&quot;</span>);</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	如果某一函数使用new运算符调用</span></span><br><span class="line"><span class="comment">	 1.当前函数中的this指向新创建的对象</span></span><br><span class="line"><span class="comment">	 2.自动去完成1.原料和3.出厂</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="comment">//=============================================</span></span><br><span class="line"><span class="comment">//最终效果 类似于 类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,sex</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sex</span>=sex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">showName</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;我的名字叫&quot;</span>+<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">showSex</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;我的性别是&quot;</span>+<span class="variable language_">this</span>.<span class="property">sex</span>+<span class="string">&quot;的&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="十九-继承和多态"><a href="#十九-继承和多态" class="headerlink" title="十九.继承和多态"></a>十九.继承和多态</h2><h3 id="1-继承"><a href="#1-继承" class="headerlink" title="1. 继承"></a>1. 继承</h3><ol>
<li><p>父类</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sum</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">name</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">age</span>=<span class="number">10</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><h4 id="原型链继承"><a href="#原型链继承" class="headerlink" title="原型链继承"></a>原型链继承</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Per</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=<span class="string">&quot;ker&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Per</span>.<span class="property"><span class="keyword">prototype</span></span>=<span class="keyword">new</span> <span class="title class_">Person</span>();<span class="comment">//原型链继承</span></span><br><span class="line"><span class="keyword">var</span> per1=<span class="keyword">new</span> <span class="title class_">Per</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(per1.<span class="property">age</span>);<span class="comment">//10</span></span><br></pre></td></tr></table></figure>

<p>概念：让新实例的原型等于父类的实例</p>
<p>特点：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）</p>
<p>缺点：</p>
<ol>
<li>新实例无法向父类构造函数传参</li>
<li>继承单一</li>
<li>所有新实例都会共享父类实例的属性。</li>
</ol>
</li>
<li><h4 id="借用构造函数继承"><a href="#借用构造函数继承" class="headerlink" title="借用构造函数继承"></a>借用构造函数继承</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Per</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title class_">Person</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>,<span class="string">&quot;jer&quot;</span>);<span class="comment">//借用构造函数继承</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span>=<span class="number">12</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> per1=<span class="keyword">new</span> <span class="title class_">Per</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(per1.<span class="property">name</span>);<span class="comment">//jer</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(per1.<span class="property">age</span>);<span class="comment">//12</span></span><br></pre></td></tr></table></figure>

<p>重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））<br>特点：</p>
<ol>
<li>只继承了父类构造函数的属性，没有继承父类原型的属性。</li>
<li>解决了原型链继承缺点1、2、3。</li>
<li>可以继承多个构造函数属性（call多个）。</li>
<li>在子实例中可向父实例传参。</li>
</ol>
<p>缺点：</p>
<ol>
<li>只能继承父类构造函数的属性。</li>
<li>无法实现构造函数的复用。（每次用每次都要重新调用）。</li>
<li>每个新实例都有父类构造函数的副本，臃肿。</li>
</ol>
</li>
<li><h4 id="组合继承-组合上面2种）（常用）"><a href="#组合继承-组合上面2种）（常用）" class="headerlink" title="组合继承(组合上面2种）（常用）"></a>组合继承(组合上面2种）（常用）</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Per</span>(<span class="params">name</span>)&#123;</span><br><span class="line">    <span class="title class_">Person</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>,name);<span class="comment">//借用构造函数</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Per</span>.<span class="property"><span class="keyword">prototype</span></span>=<span class="keyword">new</span> <span class="title class_">Person</span>();<span class="comment">//原型链继承</span></span><br><span class="line"><span class="keyword">var</span> per=<span class="keyword">new</span> <span class="title class_">Per</span>(<span class="string">&quot;ker&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sub.<span class="property">name</span>);<span class="comment">//gar 继承构造函数属性</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sub.<span class="property">age</span>);<span class="comment">//10  继承父类原型属性</span></span><br></pre></td></tr></table></figure>

<p>重点：结合了两种模式的优点，传参和复用</p>
<p>特点：</p>
<ol>
<li>可以继承父类原型上的属性，可以传参，可复用。</li>
<li>每个新实例引入的构造函数属性是私有的。</li>
</ol>
<p>缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。</p>
</li>
<li><h4 id="原型式继承"><a href="#原型式继承" class="headerlink" title="原型式继承"></a>原型式继承</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sum</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">name</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">age</span>=<span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//先封装一个函数容器，用来输出对象和承载继承的原型</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">content</span>(<span class="params">obj</span>)&#123;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">    F.<span class="property"><span class="keyword">prototype</span></span>=obj;<span class="comment">//继承传入参数</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title function_">F</span>();<span class="comment">//返回函数对象</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> sup=<span class="keyword">new</span> <span class="title class_">Person</span>();<span class="comment">//拿父类实例</span></span><br><span class="line"><span class="keyword">var</span> sup1=<span class="title function_">content</span>(sup);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sup1.<span class="property">age</span>);<span class="comment">//10 继承了父类函数属性</span></span><br></pre></td></tr></table></figure>

<p>重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。</p>
<p>特点：类似于复制一个对象，用函数来包装。</p>
<p>缺点：</p>
<ol>
<li>所有实例都会继承原型上的属性。</li>
<li>无法实现复用。（新实例属性都是后面添加的）</li>
</ol>
</li>
<li><h4 id="寄生式继承"><a href="#寄生式继承" class="headerlink" title="寄生式继承"></a>寄生式继承</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//先封装一个函数容器，用来输出对象和承载继承的原型</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">content</span>(<span class="params">obj</span>)&#123;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">    F.<span class="property"><span class="keyword">prototype</span></span>=obj;<span class="comment">//继承传入参数</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title function_">F</span>();<span class="comment">//返回函数对象</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> sup=<span class="keyword">new</span> <span class="title class_">Person</span>();<span class="comment">//拿父类实例</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">subobject</span>(<span class="params">obj</span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> sub=<span class="title function_">content</span>(obj);</span><br><span class="line">    sub.<span class="property">name</span>=<span class="string">&quot;gar&quot;</span>;</span><br><span class="line">    <span class="keyword">return</span> sub;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> sup2=<span class="title function_">subobject</span>(sup);</span><br><span class="line"><span class="comment">//这个函数经过声明之后成了可增添属性的对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> subobject);<span class="comment">//function</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> sup2);<span class="comment">//object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sup2.<span class="property">name</span>);<span class="comment">//&quot;gar&quot;,返回sub对象 继承了sub的属性</span></span><br></pre></td></tr></table></figure>

<p>重点：就是给原型式继承外面套了个壳子。</p>
<p>优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。</p>
<p>缺点：没用到原型，无法复用。</p>
</li>
<li><h4 id="寄生组合式继承（常用）"><a href="#寄生组合式继承（常用）" class="headerlink" title="寄生组合式继承（常用）"></a>寄生组合式继承（常用）</h4><p>寄生：在函数内返回对象然后调用</p>
<p>组合：1、函数原型等于另一个实例。2、在函数中用apply或call引入另一个构造函数，可以传参</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//寄生</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">content</span>(<span class="params">obj</span>)&#123;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">    F.<span class="property"><span class="keyword">prototype</span></span>=obj;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title function_">F</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//content就是F实例的另一种表示法</span></span><br><span class="line"><span class="keyword">var</span> con=<span class="title function_">content</span>(<span class="title class_">Person</span>.<span class="property">peototype</span>);</span><br><span class="line"><span class="comment">//con实例（F实例）的原型继承了父类函数的原型</span></span><br><span class="line"><span class="comment">//上述更像是原型链继承，只不过只继承了原型属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//组合</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Sub</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title class_">Person</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>);<span class="comment">//继承了父类构造函数属性</span></span><br><span class="line">&#125;<span class="comment">//解决了组合式量词调用构造函数属性缺点</span></span><br><span class="line"><span class="comment">//重点:</span></span><br><span class="line"><span class="title class_">Sub</span>.<span class="property"><span class="keyword">prototype</span></span>=con;<span class="comment">//继承了con实例</span></span><br><span class="line">con.<span class="property">constructor</span>=<span class="title class_">Sub</span>;<span class="comment">//一定要修复实例</span></span><br><span class="line"><span class="keyword">var</span> sub1=<span class="keyword">new</span> <span class="title class_">Sub</span>();</span><br><span class="line"><span class="comment">//Sub的实例就继承了构造函数属性，父类实例，con的函数属性</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sub1.<span class="property">age</span>);<span class="comment">//10;</span></span><br></pre></td></tr></table></figure>

<p>重点：修复了组合继承的问题</p>
<blockquote>
<p>继承内容引用于：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/ranyonsue/p/11201730.html">https://www.cnblogs.com/ranyonsue/p/11201730.html</a></p>
</blockquote>
</li>
</ol>
<h3 id="2-多态"><a href="#2-多态" class="headerlink" title="2.多态"></a>2.多态</h3><ul>
<li><p>多态背后的思想是将”做什么“和”谁去做以及怎样去做分开“。</p>
<p>非多态代码示例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> makeSound = <span class="keyword">function</span>(<span class="params">animal</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span>(animal <span class="keyword">instanceof</span> <span class="title class_">Duck</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘎嘎嘎&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (animal <span class="keyword">instanceof</span> <span class="title class_">Chicken</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;咯咯咯&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Duck</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Chiken</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;&#125;;</span><br><span class="line"><span class="title function_">makeSound</span>(<span class="keyword">new</span> <span class="title class_">Chicken</span>());</span><br><span class="line"><span class="title function_">makeSound</span>(<span class="keyword">new</span> <span class="title class_">Duck</span>());</span><br></pre></td></tr></table></figure>

<p>多态代码实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> makeSound = <span class="keyword">function</span>(<span class="params">animal</span>) &#123;</span><br><span class="line">    animal.<span class="title function_">sound</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Duck</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line"><span class="title class_">Duck</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sound</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘎嘎嘎&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Chicken</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;&#125;;</span><br><span class="line"><span class="title class_">Chiken</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sound</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;咯咯咯&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">makeSound</span>(<span class="keyword">new</span> <span class="title class_">Chicken</span>());<span class="comment">//咯咯咯</span></span><br><span class="line"><span class="title function_">makeSound</span>(<span class="keyword">new</span> <span class="title class_">Duck</span>());<span class="comment">//嘎嘎嘎</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="3-proto-和instanceof关键字"><a href="#3-proto-和instanceof关键字" class="headerlink" title="3.__ proto __ 和instanceof关键字"></a>3.__ proto __ 和instanceof关键字</h4><ul>
<li>__ proto __ ：构造函数构造出来的对象，有一个属性<code>__proto__</code>,指向构造出这个对象的构造函数的原型。</li>
<li>instanceof：instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上</li>
</ul>
<h2 id="二十-ECMA6的class语法"><a href="#二十-ECMA6的class语法" class="headerlink" title="二十. ECMA6的class语法"></a>二十. ECMA6的class语法</h2><ul>
<li><p>传统构造函数写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,sex,age</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">sex</span>=sex;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">show</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&#x27;我的名字叫$&#123;this.name&#125;,今年$&#123;this.age&#125;岁,$&#123;this.sex&#125;&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>ECMA6 class</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name,sex,age</span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span>=name;</span><br><span class="line">    	<span class="variable language_">this</span>.<span class="property">sex</span>=sex;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">age</span>=age;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">show</span>(<span class="params"></span>)&#123;</span><br><span class="line">    	<span class="title function_">alert</span>(<span class="string">&#x27;我的名字叫$&#123;this.name&#125;,今年$&#123;this.age&#125;岁,$&#123;this.sex&#125;&#x27;</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//继承</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Worker</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span>&#123;</span><br><span class="line">    <span class="title function_">construtor</span>(<span class="params">name,sex,age,job</span>)&#123;</span><br><span class="line">        <span class="comment">//继承父级属性</span></span><br><span class="line">        <span class="variable language_">super</span>(name,sex,age);</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">job</span>=job;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">showJob</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;我的工作是&quot;</span>+<span class="variable language_">this</span>.<span class="property">job</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">学途路漫漫</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2020/05/07/JavaScript%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/">http://example.com/2020/05/07/JavaScript%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">学途路漫漫</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/Js/">Js</a></div><div class="post_share"><div class="social-share" data-image="https://s1.ax1x.com/2023/04/03/pph4Wo4.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.png" target="_blank"><img class="post-qr-code-img" src="/img/wechat.png" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/img/alipay.png" target="_blank"><img class="post-qr-code-img" src="/img/alipay.png" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/06/05/php%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" title="php入门笔记"><img class="cover" src="https://s1.ax1x.com/2023/04/03/pph4qeO.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">php入门笔记</div></div></a></div><div class="next-post pull-right"><a href="/2020/04/03/Mysql%E6%95%B0%E6%8D%AE%E5%BA%93%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" title="Mysql数据库常用命令"><img class="cover" src="https://s1.ax1x.com/2023/04/02/ppfOMMd.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Mysql数据库常用命令</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/06/25/git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" title="git常用命令"><img class="cover" src="https://s1.ax1x.com/2023/04/03/pph46yV.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-25</div><div class="title">git常用命令</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar.gif" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">学途路漫漫</div><div class="author-info__description">今日事，今日毕</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">7</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">8</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/code-jay" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:1940879828@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://music.163.com/#/user/home?id=306898885" target="_blank" title="Music"><i class="fa-solid fa-music"></i></a></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80-JavaScript%E7%AE%80%E4%BB%8B"><span class="toc-number">1.</span> <span class="toc-text">一.JavaScript简介</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E4%BB%80%E4%B9%88%E6%98%AFJavaScript"><span class="toc-number">1.0.1.</span> <span class="toc-text">1.1. 什么是JavaScript</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E4%BB%80%E4%B9%88%E6%98%AF%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80"><span class="toc-number">1.0.2.</span> <span class="toc-text">1.2. 什么是脚本语言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-JS%E7%9A%84%E5%8F%91%E5%B1%95%E5%8E%86%E5%8F%B2"><span class="toc-number">1.0.3.</span> <span class="toc-text">2.1. JS的发展历史</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%A7%E6%88%98"><span class="toc-number">1.0.4.</span> <span class="toc-text">2.2 浏览器大战</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C-JavaScript-%E5%9F%BA%E7%A1%80%E5%86%85%E5%AE%B9"><span class="toc-number">1.1.</span> <span class="toc-text">二.JavaScript-基础内容</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%BC%96%E8%BE%91%E5%B7%A5%E5%85%B7%E5%92%8C%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="toc-number">1.1.1.</span> <span class="toc-text">1. 编辑工具和运行环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-JavaScript%E7%BB%84%E6%88%90"><span class="toc-number">1.1.2.</span> <span class="toc-text">2. JavaScript组成</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-script%E6%A0%87%E7%AD%BE"><span class="toc-number">1.1.3.</span> <span class="toc-text">3. script标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-script%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7"><span class="toc-number">1.1.4.</span> <span class="toc-text">3.1 script标签属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%90%91%E9%A1%B5%E9%9D%A2%E8%BE%93%E5%87%BA%E5%86%85%E5%AE%B9"><span class="toc-number">1.1.5.</span> <span class="toc-text">4. 向页面输出内容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-JavaScript-%E5%B8%B8%E9%87%8F%E5%92%8C%E5%8F%98%E9%87%8F"><span class="toc-number">1.1.6.</span> <span class="toc-text">5. JavaScript-常量和变量</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E5%B8%B8%E9%87%8F%EF%BC%9A%E5%80%BC%E4%B8%8D%E5%8F%AF%E4%BB%A5%E6%94%B9%E5%8F%98%E7%9A%84%E5%8F%AB%E5%81%9A%E5%B8%B8%E9%87%8F"><span class="toc-number">1.1.6.1.</span> <span class="toc-text">5.1. 常量：值不可以改变的叫做常量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-%E5%8F%98%E9%87%8F%EF%BC%9A%E5%80%BC%E5%8F%AF%E4%BB%A5%E8%A2%AB%E4%BF%AE%E6%94%B9%E7%9A%84%E5%8F%AB%E5%81%9A%E5%8F%98%E9%87%8F"><span class="toc-number">1.1.6.2.</span> <span class="toc-text">5.2. 变量：值可以被修改的叫做变量</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%8F%98%E9%87%8F%E5%91%BD%E5%90%8D-%E5%92%8C-%E5%BC%B1%E5%BC%95%E7%94%A8"><span class="toc-number">1.1.7.</span> <span class="toc-text">6. 变量命名 和 弱引用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#6-1-%E5%8F%98%E9%87%8F%E5%91%BD%E5%90%8D"><span class="toc-number">1.1.7.1.</span> <span class="toc-text">6.1. 变量命名</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-2-%E5%8F%98%E9%87%8F%E5%BC%B1%E5%BC%95%E7%94%A8"><span class="toc-number">1.1.7.2.</span> <span class="toc-text">6.2. 变量弱引用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.1.8.</span> <span class="toc-text">7. 运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#7-1-%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.1.8.1.</span> <span class="toc-text">7.1. 关系运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-2-%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.1.8.2.</span> <span class="toc-text">7.2. 逻辑运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-%E8%87%AA%E5%8A%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">1.1.8.3.</span> <span class="toc-text">7.3. 自动数据类型转换</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-4-%E5%BC%BA%E5%88%B6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%EF%BC%9A"><span class="toc-number">1.1.8.4.</span> <span class="toc-text">7.4. 强制数据类型转换：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%B5%81%E7%A8%8B%E8%AF%AD%E5%8F%A5%E7%BB%83%E4%B9%A0-%E8%BE%93%E5%87%BA%E5%BD%93%E5%89%8D%E5%B9%B4%E7%9A%84%E7%AC%AC%E5%A4%9A%E5%B0%91%E5%A4%A9"><span class="toc-number">1.1.8.5.</span> <span class="toc-text">8. 流程语句练习,输出当前年的第多少天</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89-JavaScript-%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.</span> <span class="toc-text">三. JavaScript-函数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%87%BD%E6%95%B0%E7%9A%84%E6%A6%82%E5%BF%B5%E5%8F%8A%E4%BD%9C%E7%94%A8"><span class="toc-number">1.2.0.1.</span> <span class="toc-text">1. 函数的概念及作用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E4%B8%8E%E8%B0%83%E7%94%A8"><span class="toc-number">1.2.0.2.</span> <span class="toc-text">2. 函数的声明与调用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.0.3.</span> <span class="toc-text">3. 封装函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-arguments"><span class="toc-number">1.2.0.4.</span> <span class="toc-text">4. arguments</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E5%87%BD%E6%95%B0%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">1.2.0.5.</span> <span class="toc-text">5. 函数作用域</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E9%80%92%E5%BD%92%E5%87%BD%E6%95%B0"><span class="toc-number">1.2.0.6.</span> <span class="toc-text">6. 递归函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-1-%E9%80%92%E5%BD%92%E7%BB%83%E4%B9%A0"><span class="toc-number">1.2.0.7.</span> <span class="toc-text">6.1. 递归练习</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B-JavaScript-%E6%95%B0%E7%BB%84"><span class="toc-number">1.3.</span> <span class="toc-text">四. JavaScript-数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%AE%A4%E8%AF%86%E6%95%B0%E7%BB%84"><span class="toc-number">1.3.1.</span> <span class="toc-text">1.认识数组</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84"><span class="toc-number">1.3.1.1.</span> <span class="toc-text">1.1. 为什么要使用数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-%E6%95%B0%E7%BB%84%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">1.3.1.2.</span> <span class="toc-text">1.2. 数组的概念</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A3%B0%E6%98%8E%E6%95%B0%E7%BB%84"><span class="toc-number">1.3.2.</span> <span class="toc-text">2.声明数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%95%B0%E7%BB%84%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.3.</span> <span class="toc-text">3.数组属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%95%B0%E7%BB%84%E9%81%8D%E5%8E%86"><span class="toc-number">1.3.4.</span> <span class="toc-text">4.数组遍历</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-%E9%9A%8F%E6%9C%BA%E6%95%B0"><span class="toc-number">1.3.4.1.</span> <span class="toc-text">4.1. 随机数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-%E5%BE%AA%E7%8E%AF%E8%B5%8B%E5%80%BC"><span class="toc-number">1.3.4.2.</span> <span class="toc-text">4.2. 循环赋值</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-%E5%BF%AB%E9%80%9F%E9%81%8D%E5%8E%86-x2F-%E5%BF%AB%E9%80%9F%E6%9E%9A%E4%B8%BE"><span class="toc-number">1.3.4.3.</span> <span class="toc-text">4.3. 快速遍历&#x2F;快速枚举</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.</span> <span class="toc-text">5.数组方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E6%A0%88%E7%BB%93%E6%9E%84"><span class="toc-number">1.3.5.1.</span> <span class="toc-text">5.1. 栈结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E9%98%9F%E5%88%97%E7%BB%93%E6%9E%84"><span class="toc-number">1.3.5.2.</span> <span class="toc-text">5.1. 队列结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-concat-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.3.</span> <span class="toc-text">5.2. concat()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-2-slice-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.4.</span> <span class="toc-text">5.2. slice()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-splice-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.5.</span> <span class="toc-text">5.3. splice()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-4-join-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.6.</span> <span class="toc-text">5.4. join()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-5-resver-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.7.</span> <span class="toc-text">5.5. resver()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-6-sort-%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.5.8.</span> <span class="toc-text">5.6. sort()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-7-%E6%95%B0%E7%BB%84%E6%B1%82%E5%B9%B3%E5%9D%87%E6%95%B0"><span class="toc-number">1.3.5.9.</span> <span class="toc-text">5.7. 数组求平均数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.3.6.</span> <span class="toc-text">6. 引用数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87%E5%92%8C%E7%9C%81%E7%95%A5var"><span class="toc-number">1.3.7.</span> <span class="toc-text">7. 声明提升和省略var</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84"><span class="toc-number">1.3.8.</span> <span class="toc-text">8. 二维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-%E5%86%92%E6%B3%A1%E5%92%8C%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F"><span class="toc-number">1.3.9.</span> <span class="toc-text">9. 冒泡和选择排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-%E6%95%B0%E7%BB%84%E7%BB%83%E4%B9%A0"><span class="toc-number">1.3.10.</span> <span class="toc-text">10.数组练习</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94-JavaScript-ECMA5"><span class="toc-number">1.4.</span> <span class="toc-text">五. JavaScript-ECMA5</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ECMA5%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F"><span class="toc-number">1.4.1.</span> <span class="toc-text">1.ECMA5严格模式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E7%9A%84%E8%A1%8C%E4%B8%BA%E5%8F%98%E6%9B%B4"><span class="toc-number">1.4.1.1.</span> <span class="toc-text">1.1.严格模式的行为变更</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-ECMA5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.2.</span> <span class="toc-text">2.ECMA5新增数组方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-indexOf-%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.2.1.</span> <span class="toc-text">1. indexOf()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-forEach-%E5%BE%AA%E7%8E%AF"><span class="toc-number">1.4.2.2.</span> <span class="toc-text">2.forEach()循环</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-map-%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.2.3.</span> <span class="toc-text">3.map()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-filter-%E8%BF%87%E6%BB%A4"><span class="toc-number">1.4.2.4.</span> <span class="toc-text">4.filter()过滤</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-some-%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.2.5.</span> <span class="toc-text">5.some()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-every-%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.2.6.</span> <span class="toc-text">6.every()方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-reduce-%E5%BD%92%E5%B9%B6"><span class="toc-number">1.4.2.7.</span> <span class="toc-text">7.reduce()归并</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AD-JavaScript-%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.5.</span> <span class="toc-text">六. JavaScript-字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="toc-number">1.5.1.</span> <span class="toc-text">1.字符串的基本概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95"><span class="toc-number">1.5.2.</span> <span class="toc-text">2.字符串方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%B8%8D%E5%B8%B8%E7%94%A8%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E6%A0%BC%E5%BC%8F%EF%BC%9A%E5%AD%97%E7%AC%A6%E4%B8%B2-%E5%87%BD%E6%95%B0%E5%90%8D"><span class="toc-number">1.5.2.1.</span> <span class="toc-text">1.不常用字符串方法格式：字符串.函数名()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%8E%B7%E5%8F%96%E6%96%B9%E6%B3%95"><span class="toc-number">1.5.2.2.</span> <span class="toc-text">2.字符串获取方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9F%A5%E6%89%BE%E6%96%B9%E6%B3%95"><span class="toc-number">1.5.2.3.</span> <span class="toc-text">3.字符串查找方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8F%90%E5%8F%96%E6%96%B9%E6%B3%95"><span class="toc-number">1.5.2.4.</span> <span class="toc-text">4.字符串提取方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9B%BF%E6%8D%A2%E5%88%86%E5%89%B2"><span class="toc-number">1.5.2.5.</span> <span class="toc-text">5.字符串替换分割</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E5%A4%A7%E5%B0%8F%E5%86%99"><span class="toc-number">1.5.2.6.</span> <span class="toc-text">6.字符串转大小写</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BB%83%E4%B9%A0"><span class="toc-number">1.5.3.</span> <span class="toc-text">3.字符串练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%AA%8C%E8%AF%81%E7%A0%81%E7%94%9F%E6%88%90"><span class="toc-number">1.5.4.</span> <span class="toc-text">4.字符串验证码生成</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%83-JavaScript-%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.6.</span> <span class="toc-text">七. JavaScript-对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%AE%A4%E8%AF%86%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.6.1.</span> <span class="toc-text">1. 认识对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%B8%B8%E7%94%A8Math%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95"><span class="toc-number">1.6.2.</span> <span class="toc-text">2. 常用Math对象方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.6.3.</span> <span class="toc-text">3. 日期对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95"><span class="toc-number">1.6.4.</span> <span class="toc-text">4. 日期对象方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1-%E6%A0%BC%E5%8C%96%E5%BC%8F%E6%96%B9%E6%B3%95%EF%BC%88%E4%BA%86%E8%A7%A3%EF%BC%89"><span class="toc-number">1.6.4.1.</span> <span class="toc-text">4.1. 格化式方法（了解）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2-%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">1.6.4.2.</span> <span class="toc-text">4.2.常用方法（重点）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3-%E6%97%A5%E6%9C%9F%E7%BB%83%E4%B9%A0"><span class="toc-number">1.6.4.3.</span> <span class="toc-text">4.3. 日期练习</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#4-3-1-%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%AF%AB%E7%A7%92%E6%95%B0"><span class="toc-number">1.6.4.3.1.</span> <span class="toc-text">4.3.1. 日期对象转毫秒数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-3-2-%E8%8E%B7%E5%8F%96%E4%B8%A4%E4%B8%AA%E6%97%A5%E6%9C%9F%E4%B9%8B%E9%97%B4%E7%9B%B8%E5%B7%AE%E7%9A%84%E5%A4%A9%E6%95%B0"><span class="toc-number">1.6.4.3.2.</span> <span class="toc-text">4.3.2. 获取两个日期之间相差的天数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-3-2-%E8%BE%93%E5%85%A5n%EF%BC%8C%E8%BE%93%E5%87%BAn%E5%A4%A9%E5%90%8E%E7%9A%84%E6%97%B6%E9%97%B4"><span class="toc-number">1.6.4.3.3.</span> <span class="toc-text">4.3.2. 输入n，输出n天后的时间</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">1.6.5.</span> <span class="toc-text">5. 定时器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AB-JavaScript-BOM"><span class="toc-number">1.7.</span> <span class="toc-text">八. JavaScript-BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-number">1.7.1.</span> <span class="toc-text">1. 简介</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%B3%BB%E7%BB%9F%E5%AF%B9%E8%AF%9D%E6%A1%86"><span class="toc-number">1.7.2.</span> <span class="toc-text">2. 系统对话框</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-open-%E6%96%B9%E6%B3%95"><span class="toc-number">1.7.3.</span> <span class="toc-text">3. open()方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-history%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.7.4.</span> <span class="toc-text">3. history对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-location%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.7.5.</span> <span class="toc-text">4. location对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B9%9D-JavaScript-DOM"><span class="toc-number">1.8.</span> <span class="toc-text">九. JavaScript-DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E7%9A%84%E8%8E%B7%E5%8F%96"><span class="toc-number">1.8.1.</span> <span class="toc-text">1.元素节点的获取</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%9C%89%E6%95%88%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.8.2.</span> <span class="toc-text">2.获取当前有效样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-attribute%E5%92%8C%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.3.</span> <span class="toc-text">3.attribute和元素节点属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-attribute"><span class="toc-number">1.8.3.1.</span> <span class="toc-text">3.1.attribute</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.3.2.</span> <span class="toc-text">3.2.元素节点属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E8%8E%B7%E5%8F%96%E6%96%87%E6%9C%AC%E5%AD%90%E8%8A%82%E7%82%B9"><span class="toc-number">1.8.4.</span> <span class="toc-text">4.获取文本子节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%B1%9E%E6%80%A7%E8%8A%82%E7%82%B9attributes"><span class="toc-number">1.8.5.</span> <span class="toc-text">5.属性节点attributes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-DOM%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C"><span class="toc-number">1.8.6.</span> <span class="toc-text">6. DOM节点操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-this%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.8.7.</span> <span class="toc-text">7. this关键字</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-offset%E6%96%B9%E6%B3%95"><span class="toc-number">1.8.8.</span> <span class="toc-text">8. offset方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#8-1-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9B%B8%E5%AF%B9%E4%BA%8E%E8%A7%86%E5%8F%A3%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.8.8.1.</span> <span class="toc-text">8.1. 获取元素相对于视口的位置</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-%E6%96%87%E6%A1%A3%E7%A2%8E%E7%89%87"><span class="toc-number">1.8.9.</span> <span class="toc-text">9. 文档碎片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-%E6%95%B0%E7%BB%84%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95"><span class="toc-number">1.8.10.</span> <span class="toc-text">10. 数组和对象的遍历方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B9%9D-JavaScript-%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">九. JavaScript-事件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%BA%8B%E4%BB%B6%E5%92%8C%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.9.1.</span> <span class="toc-text">1.事件和事件类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">1.9.1.1.</span> <span class="toc-text">1.1. 什么是事件：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E6%96%B9%E5%BC%8F"><span class="toc-number">1.9.1.2.</span> <span class="toc-text">1.2. 事件绑定方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-3-%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B%E7%9A%84%E7%A7%8D%E7%B1%BB"><span class="toc-number">1.9.1.3.</span> <span class="toc-text">1.3. 事件类型的种类</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E5%92%8C%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="toc-number">1.9.2.</span> <span class="toc-text">2. 事件对象和事件对象属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.9.2.1.</span> <span class="toc-text">2.1. 事件对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="toc-number">1.9.2.2.</span> <span class="toc-text">2.2. 事件对象属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%9B%AE%E6%A0%87%E5%AF%B9%E8%B1%A1%E5%92%8C%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="toc-number">1.9.3.</span> <span class="toc-text">3. 目标对象和事件冒泡</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-%E7%9B%AE%E6%A0%87%E5%AF%B9%E8%B1%A1target"><span class="toc-number">1.9.3.1.</span> <span class="toc-text">3.1. 目标对象target</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E6%8D%95%E8%8E%B7"><span class="toc-number">1.9.3.2.</span> <span class="toc-text">3.2. 事件冒泡与捕获</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA"><span class="toc-number">1.9.4.</span> <span class="toc-text">4.阻止默认行为</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%AE%9E%E7%8E%B0%E6%8B%96%E6%8B%BD%E4%BD%BF%E7%94%A8%E5%88%B0%E7%9A%84%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.9.5.</span> <span class="toc-text">5.实现拖拽使用到的事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">1.9.6.</span> <span class="toc-text">6. 事件委托</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%99%A8"><span class="toc-number">1.9.7.</span> <span class="toc-text">7. 事件监听器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%99%A8%E5%85%BC%E5%AE%B9"><span class="toc-number">1.9.7.1.</span> <span class="toc-text">事件监听器兼容</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%81-JavaScript-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">1.9.8.</span> <span class="toc-text">十. JavaScript-正则表达式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%A6%82%E5%BF%B5"><span class="toc-number">1.9.9.</span> <span class="toc-text">1. 概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%88%9B%E5%BB%BA%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">1.9.10.</span> <span class="toc-text">2. 创建正则表达式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%96%B9%E6%B3%95"><span class="toc-number">1.9.11.</span> <span class="toc-text">3. 正则表达式方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8F%AF%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95"><span class="toc-number">1.9.12.</span> <span class="toc-text">4.可使用正则表达式的字符串方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%85%83%E5%AD%97%E7%AC%A6"><span class="toc-number">1.9.13.</span> <span class="toc-text">5.元字符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E5%B8%B8%E7%94%A8%E5%85%83%E5%AD%97%E7%AC%A6"><span class="toc-number">1.9.13.1.</span> <span class="toc-text">5.1. 常用元字符</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%B8%80-localStorage"><span class="toc-number">1.10.</span> <span class="toc-text">十一. localStorage</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AFlocalStorage"><span class="toc-number">1.10.1.</span> <span class="toc-text">1.什么是localStorage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-localStorage%E4%BC%98%E5%8A%BF%E4%B8%8E%E5%B1%80%E9%99%90"><span class="toc-number">1.10.2.</span> <span class="toc-text">2.localStorage优势与局限</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-cookie"><span class="toc-number">1.10.3.</span> <span class="toc-text">3.cookie</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-sessionStorage"><span class="toc-number">1.10.4.</span> <span class="toc-text">4.sessionStorage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-localStorage%E6%96%B9%E6%B3%95"><span class="toc-number">1.10.5.</span> <span class="toc-text">5.localStorage方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%BA%8C-%E5%BC%BA%E5%88%B6%E6%94%B9%E5%8F%98this%E6%8C%87%E5%90%91%E5%87%BD%E6%95%B0"><span class="toc-number">1.11.</span> <span class="toc-text">十二. 强制改变this指向函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%B8%89-let%E5%92%8Cconst%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.12.</span> <span class="toc-text">十三. let和const关键字</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-let%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.12.1.</span> <span class="toc-text">1. let关键字</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-const%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.12.2.</span> <span class="toc-text">2. const关键字</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E5%9B%9B-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">1.13.</span> <span class="toc-text">十四. 箭头函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%BA%94-%E8%A7%A3%E6%9E%84%E5%92%8CECMA6%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.14.</span> <span class="toc-text">十五. 解构和ECMA6字符串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%A7%A3%E6%9E%84"><span class="toc-number">1.14.1.</span> <span class="toc-text">1. 解构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-ECMA6%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">1.14.2.</span> <span class="toc-text">2. ECMA6字符串</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E5%85%AD-ECMA6%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%90%88%E5%B9%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.15.</span> <span class="toc-text">十六.ECMA6新增数组方法和合并对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95"><span class="toc-number">1.15.1.</span> <span class="toc-text">1. 新增数组方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%90%88%E5%B9%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.15.2.</span> <span class="toc-text">2. 合并对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E5%85%AD-ECMA6%E9%9B%86%E5%90%88"><span class="toc-number">1.16.</span> <span class="toc-text">十六.ECMA6集合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%B8%83-%E6%95%B0%E7%BB%84%E9%81%8D%E5%8E%86%E5%9B%9E%E9%A1%BE%E4%B8%8E%E8%A1%A5%E5%85%85"><span class="toc-number">1.17.</span> <span class="toc-text">十七.数组遍历回顾与补充</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E5%85%AB-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0-%E5%B0%81%E8%A3%85"><span class="toc-number">1.18.</span> <span class="toc-text">十八.构造函数(封装)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%81%E4%B9%9D-%E7%BB%A7%E6%89%BF%E5%92%8C%E5%A4%9A%E6%80%81"><span class="toc-number">1.19.</span> <span class="toc-text">十九.继承和多态</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%BB%A7%E6%89%BF"><span class="toc-number">1.19.1.</span> <span class="toc-text">1. 继承</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E9%93%BE%E7%BB%A7%E6%89%BF"><span class="toc-number">1.19.1.1.</span> <span class="toc-text">原型链继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%80%9F%E7%94%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF"><span class="toc-number">1.19.1.2.</span> <span class="toc-text">借用构造函数继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF-%E7%BB%84%E5%90%88%E4%B8%8A%E9%9D%A22%E7%A7%8D%EF%BC%89%EF%BC%88%E5%B8%B8%E7%94%A8%EF%BC%89"><span class="toc-number">1.19.1.3.</span> <span class="toc-text">组合继承(组合上面2种）（常用）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="toc-number">1.19.1.4.</span> <span class="toc-text">原型式继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%84%E7%94%9F%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="toc-number">1.19.1.5.</span> <span class="toc-text">寄生式继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%84%E7%94%9F%E7%BB%84%E5%90%88%E5%BC%8F%E7%BB%A7%E6%89%BF%EF%BC%88%E5%B8%B8%E7%94%A8%EF%BC%89"><span class="toc-number">1.19.1.6.</span> <span class="toc-text">寄生组合式继承（常用）</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A4%9A%E6%80%81"><span class="toc-number">1.19.2.</span> <span class="toc-text">2.多态</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-proto-%E5%92%8Cinstanceof%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">1.19.2.1.</span> <span class="toc-text">3.__ proto __ 和instanceof关键字</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E5%8D%81-ECMA6%E7%9A%84class%E8%AF%AD%E6%B3%95"><span class="toc-number">1.20.</span> <span class="toc-text">二十. ECMA6的class语法</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/03/10/vue3%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" title="vue3快速上手"><img src="https://user-images.githubusercontent.com/499550/93624428-53932780-f9ae-11ea-8d16-af949e16a09f.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue3快速上手"/></a><div class="content"><a class="title" href="/2023/03/10/vue3%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" title="vue3快速上手">vue3快速上手</a><time datetime="2023-03-10T06:20:40.000Z" title="发表于 2023-03-10 14:20:40">2023-03-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/12/01/laravel%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="laravel框架学习笔记"><img src="https://s1.ax1x.com/2023/04/03/pph4doQ.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="laravel框架学习笔记"/></a><div class="content"><a class="title" href="/2020/12/01/laravel%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="laravel框架学习笔记">laravel框架学习笔记</a><time datetime="2020-12-01T12:06:29.000Z" title="发表于 2020-12-01 20:06:29">2020-12-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/06/25/git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" title="git常用命令"><img src="https://s1.ax1x.com/2023/04/03/pph46yV.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="git常用命令"/></a><div class="content"><a class="title" href="/2020/06/25/git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" title="git常用命令">git常用命令</a><time datetime="2020-06-25T08:00:29.000Z" title="发表于 2020-06-25 16:00:29">2020-06-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/06/22/Cookie%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/" title="Cookie本地存储"><img src="https://s1.ax1x.com/2023/04/03/pph4Ysf.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Cookie本地存储"/></a><div class="content"><a class="title" href="/2020/06/22/Cookie%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/" title="Cookie本地存储">Cookie本地存储</a><time datetime="2020-06-22T07:47:29.000Z" title="发表于 2020-06-22 15:47:29">2020-06-22</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/06/05/php%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" title="php入门笔记"><img src="https://s1.ax1x.com/2023/04/03/pph4qeO.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="php入门笔记"/></a><div class="content"><a class="title" href="/2020/06/05/php%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" title="php入门笔记">php入门笔记</a><time datetime="2020-06-05T08:27:40.000Z" title="发表于 2020-06-05 16:27:40">2020-06-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 学途路漫漫</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><div class="js-pjax"></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>